Как получить значение (от даты - до даты) из палитры дат в диапазоне дат в материале угловой

Question

Я передал даты от компонента к шаблону выбора даты.Здесь мой вопрос, как получить значение из шаблона ( HTML ) в файл компонента ( TS ).Как показано ниже

startDate = new Date() || selected start date from date picker endDate = new Date(2019, 1, 20) || selected end date form date picker

Машинопись:

export class AppComponent {
  startDate = new Date();
  endDate = new Date(2019, 1, 20);
  form: FormGroup;

  constructor(fb: FormBuilder) {
    this.form = fb.group({
      date: [{begin: this.startDate, end: this.endDate}]
    });
  }
}

HTML:

<form [formGroup]="form">
  <mat-form-field>
    <input matInput 
      placeholder="Choose a date" 
      [satDatepicker]="picker" 
      formControlName="date">
    <sat-datepicker-toggle 
      matSuffix 
      [for]="picker">
    </sat-datepicker-toggle>
    <sat-datepicker 
      #picker 
      [rangeMode]="true" 
      touchUi="true">
    </sat-datepicker>
  </mat-form-field>
</form>

Здесь сначала я передаю дату по умолчанию, но как только дата выберет другой диапазон, я не знаю, как получить значение для выбранного или для изменения значения.Я пытался ngModel , но не получил значение из переменной.Здесь я упомянул ссылку на проект Stackblitz.

https://stackblitz.com/edit/angular-3gx6xx

Answer 1

просто добавьте

this.form.get('date').valueChanges
      .subscribe(res => console.log(res));

в конструктор или используйте

this.form.valueChanges.subscribe(res => console.log(res));

, и вы также можете добавить функцию проверки или что-то еще

import { filter, map, startWith  } from 'rxjs/internal/operators';
....
   this.form.valueChanges
    .pipe(
      filter(() => this.form.valid),
      map(data => {
        // append last update time to result
        data.lastTime = new Date();
        return data;
      })
    )
    .subscribe(res => console.log(res));