Как сделать отключенный ввод также обязательным с Angular Reactive Form?

У меня есть ввод, который будет заполнен, когда пользователь нажмет на диалоговое окно. Поэтому для этого мне пришлось сделать его отключенным, потому что я не хочу, чтобы пользователь вводил значение вручную. Единственная проблема в том, что этот ввод должен быть обязательным, и я не мог сделать это до сих пор.

Я попытался добавить директиву «required» во ввод, а также попытался добавить Validator.required при создании формы, но ни один из них не сделал поле обязательным для формы.

createUnityForm(): FormGroup {
    return this._formBuilder.group({
        id      : [this.unity.id],
        description: [this.unity.description],
        floor: [{value: this.unity.floor, disabled: true}, Validators.required]
    });
}

<mat-form-field appearance = "outline" floatLabel = "always" class = "mr-16" fxFlex>
    <mat-label>{{'UNITY.FLOOR' | translate}}</mat-label>
    <input matInput placeholder = "{{'UNITY.SELECT-FLOOR' | translate}}"
        name = "floor"
        formControlName = "floor"
        required>
</mat-form-field>

<button *ngIf = "action === 'edit'"
    mat-button
    class = "save-button"
    (click) = "matDialogRef.close(['save',unityForm])"
    [disabled] = "unityForm.invalid"
    aria-label = "save">
        {{'GENERAL.SAVE' | translate}}
</button>

unityForm действителен, даже если на входе ничего нет

Когда я пытаюсь добавить [disabled] = true во ввод, angular показывает в консоли: Похоже, вы используете отключенный атрибут с директивой реактивной формы. Если вы установите для параметра disabled значение true при настройке этого элемента управления в своем классе компонентов, атрибут disabled будет фактически установлен в DOM для вас. Мы рекомендуем использовать этот подход, чтобы избежать ошибок «изменено после проверки». Пример: form = new FormGroup({ first: new FormControl({value: 'Нэнси', disabled: true}, Validators.required), }); Это именно то, что я закодировал. Не работает

Marcos Bertuol 22.05.2019 14:58

Возможно, this.unity.floor содержит значение в начале. Если он имеет значение, то проверка может пройти

Dilan Tharaka 22.05.2019 15:05

Это не так.. пробовал также с floor: [{value: null, disabled: true}, Validators.required], но проблема остается.

Marcos Bertuol 22.05.2019 15:18
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
2
3
4 242
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Ответ принят как подходящий

Если вы установите FormControl на disabled, его валидаторы будут игнорироваться.

Дополнительная информация: https://angular.io/api/forms/AbstractControl#disabled

Это неправильно, вы не можете динамически устанавливать formControl, используя свойство disabled, оно доступно только для чтения! Вы, вероятно, захотите использовать правила проверки, а затем использовать свойство только для чтения, чтобы отключить его stackoverflow.com/questions/54533202/…

Ben Petersen 06.05.2021 21:35

Попробуйте readonly вместо disabled.

У Радослава он есть. Попробуйте в HTML только для чтения вместо отключенного в модели. Это обеспечивает аналогичный пользовательский интерфейс для отключения элемента управления в модели, но проверка остается активной. Это может быть полезно (например, извлекать записи из других источников для фиксации в другой базе данных, не допуская каких-либо пользовательских изменений, а фиксируя только в том случае, если исходные данные действительны)

Вы не можете, реактивные формы не используют валидаторы для отключенных полей. Я думаю, что это хороший способ сделать так:

-HTML

<input
type = "text"
formControlName = "controlName"
[ngClass] = "{ 'is-invalid': 
(c.controlName.errors || c.controlName.disabled) 
&& submited }"/>

-Машинопись

submited = false;

form: FormGroup = this.formBuilder.group({
    controlName: [{ value: '', disabled: true }, Validators.required]
});

get c(): { [key: string]: AbstractControl } {
    return this.form.controls;
}

save(): void {
    this.submited = true;    
    if (this.form.invalid
       || this.formControl.controlname.value === '') {
     return;
}

-CSS

.is-invalid {
  border: 1px solid #dc3545;
}

Когда вы нажимаете кнопку СОХРАНИТЬ, обязательное поле получает красную рамку, если нет значения

Другие вопросы по теме