Как сделать отключенный ввод также обязательным с угловой реактивной формы?

Question

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

Я попытался добавить директиву 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 действует, даже если на входе ничего нет

Answer 1

Пытаться readonly вместо того disabled.

Answer 2

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

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

Answer 3

Когда он устанавливает отключенный атрибут, валидаторы будут игнорироваться.

Отключенные элементы управления освобождаются от проверок и не включаются в совокупное значение их элементов управления-предков.

См.: https://angular.io/api/forms/AbstractControl#disabled .

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

      this._formBuilder.group({
    ...
    name: ['Your value here', Validators.required]
});

      <input formControlName="name" readonly/>

Answer 4

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

Answer 5

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

-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;
}

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