web-dev-qa-db-ja.com

リアクティブフォームから材料日付ピッカーコントロールを駆動する

チェックボックスのトグルクリックで動的に無効および有効にする日付ピッカーがありました。ライブラリのすべてのコンポーネント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で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は初期状態のままです。 FormControlに依存しないmat-datepicker-toggle状態。

<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とは常に同じ状態です。

オフ enter image description here オン enter image description here

mat-datepicker-toggleを操作するにはどうすればよいですかFromControl？

angularangular-material2angular-reactive-forms
3
Pavel

コントロールの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();
    }
  }
}
4
Marshal