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

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中的FormContol内替换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();
    }
  }
}