Инвалид не работает в угловых реактивных формах

Question

Я пытаюсь использовать disabled для ввода формы материала:

<mat-form-field>
  <input 
    matInput 
    formControlName="date" 
    [matDatepicker]="dp3" 
    placeholder="YYYY-MM-DD">
  <mat-datepicker-toggle 
    matSuffix 
    [for]="dp3">
  </mat-datepicker-toggle>
  <mat-datepicker #dp3 disabled="false"></mat-datepicker>
</mat-form-field>

Мой элемент управления формы определяется следующим образом:

this.dateAmountFormGroup = this.fb.group({
  date: new FormControl({
    value: '',
    disabled: true
  }),
});

Однако при нажатии на input поле, оно не получает отключено .

Answer 1

Похоже, вы используете disabled="false" в <mat-datepicker #dp3 disabled="false"></mat-datepicker>

Именно поэтому поле формы не отключается.

Возможно, вы захотите изменить свою реализацию следующим образом:

Шаблон:

<form [formGroup]="dateAmountFormGroup">
  <mat-form-field>
    <input 
      matInput 
      [matDatepicker]="picker1" 
      placeholder="Angular forms" 
      formControlName="date">
    <mat-datepicker-toggle 
      matSuffix 
      [for]="picker1">
    </mat-datepicker-toggle>
    <mat-datepicker #picker1></mat-datepicker>
  </mat-form-field>
</form>

Класс:

export class DatepickerValueExample {
  ...
  dateAmountFormGroup: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    ...
    this.dateAmountFormGroup = this.fb.group({
      date: new FormControl({
        value: new Date(),
        disabled: true
      }),
    });
    ...
  }

  ...

}

Вот вам Образец StackBlitz для вашей ссылки.