Как сделать отключенный ввод также обязательным с 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
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Обработка ошибок при выполнении HTTP-запросов в JavaScript.
Обработка ошибок при выполнении HTTP-запросов в JavaScript.
Каждый проект должен выполнять HTTP-запросы, и, конечно, некоторые из этих запросов могут содержать ошибки. Нам нужно знать, как обрабатывать эти...
Включение UTF-8 в jsPDF с помощью Angular
Включение UTF-8 в jsPDF с помощью Angular
Привет, разработчики, я предполагаю, что вы уже знаете, как экспортировать pdf через jsPDF. Если ответ отрицательный, то вы можете ознакомиться с моей...
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;
}

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

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