Привод контроля выбора даты материала из реактивной формы - PullRequest
Новая
       21

Привод контроля выбора даты материала из реактивной формы

0 голосов
/ 27 ноября 2018

У меня был инструмент выбора даты, который должен динамически отключаться и включаться с помощью переключателя, нажимающего кнопку.Все компоненты из библиотечного углового материала 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)
});

И у меня есть идея заменить FormContol внутри FormGroup прямо в TS, что-то вроде этого: 

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 всегда в одном и том же состоянии:

OFF enter image description here ON enter image description here

Как я могу манипулировать mat-datepicker-toggle мыслей FromControl?

1 Ответ

0 голосов
/ 27 ноября 2018

В элементе управления есть методы disable() и enable(), которые вам необходимо будет использовать для программного переключения состояния отключения элемента управления.

Пожалуйста, просмотрите этот пример стекаблиц

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