从反应形式驱动物料日期选择器控制

Question

我有日期选择器，它应该通过复选框切换单击动态禁用和启用。来自库角材料 6 的所有组件。由于我对表单处理程序使用反应式方法，我不能简单地使用[disable]指令。我得到了进一步的错误：

It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true
when you set up this control in your component class, the disabled attribute will actually be set in the DOM for
you. We recommend using this approach to avoid 'changed after checked' errors.

Example: 
form = new FormGroup({
  first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
  last: new FormControl('Drew', Validators.required)
});

我有想法直接在 TS 中替换FormContolinside FormGroup，如下所示：

toggleDatePicker() {
  this.isDateRange = !this.isDateRange;
  this.form.removeControl('to');
  if (this.isDateRange) {
    this.form.addControl('to', new FormControl({value: new Date(), disabled: false}))
  } else {
    this.form.addControl('to', new FormControl({value: null, disabled: true}))
  }
} 

这对input标签有效，但mat-datepicker-toggle仍保持初始状态。mat-datepicker-toggle状态不依赖于FormControl.

<mat-form-field>
  <input
    matInput
   [matDatepicker]="to"
   formControlName="to"
   [disabled]="isDateRange"
  >
<mat-datepicker-toggle matSuffix [for]="to"></mat-datepicker-toggle> // THIS IS NO CHANGE(
  <mat-datepicker #to></mat-datepicker>
</mat-form-field>

独立于我的FormControl操纵mat-datepicker-toggle始终处于相同状态：

离开 在

我怎样才能操纵mat-datepicker-toggle思想FromControl？

Answer 1

有disable()与enable()在控制方法，你将需要使用以编程方式切换控制禁用状态。

请查看此 stackblitz 示例

https://stackblitz.com/edit/angular-lenyzk?embed=1&file=app/datepicker-overview-example.ts

HTML模板

<form [formGroup]="form">
    <mat-checkbox (click)="toggleCtrState()">Toggle Control State</mat-checkbox>
    <mat-form-field>
        <input
        matInput
        [matDatepicker]="to"
        formControlName="to"
        >
    <mat-datepicker-toggle matSuffix [for]="to"></mat-datepicker-toggle>
    <mat-datepicker #to></mat-datepicker>
</mat-form-field>
</form>

成分

import { Component } from '@angular/core';
import { FormControl, FormGroup, FormBuilder, Validators } from '@angular/forms';

/** @title Basic datepicker */
@Component({
  selector: 'datepicker-overview-example',
  templateUrl: 'datepicker-overview-example.html',
  styleUrls: ['datepicker-overview-example.css'],
})
export class DatepickerOverviewExample {

  form = new FormGroup({
    to: new FormControl('', Validators.required),
  });

  toggleCtrState() {
    const ctrl = this.form.get('to');
    if (ctrl.disabled) {
      ctrl.enable();
    } else {
      ctrl.disable();
    }
  }
}