从反应形式驱动 material 日期选择器控件

Question

我有日期选择器，它应该通过复选框切换单击动态禁用和启用。库中的所有组件 angular material 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 中替换 FormGroup 里面的 FormContol，像这样：

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

从反应形式驱动 material 日期选择器控件

Drive material date picker control from reactive form

angular-material2

angular

angular-reactive-forms