Angular date-range-input fire change

Question

I have problem because I do not know how to fire a change event after someone picks a date.

My current code:

<div class="d-flex align-items-center">
    <mat-form-field appearance="fill">
      <mat-label>Wybierz przedział czasowy
      </mat-label>
      <mat-date-range-input [formGroup]="range" [rangePicker]="picker">
        <input matStartDate formControlName="start" placeholder="Data początkowa">
        <input matEndDate formControlName="end" placeholder="Data końcowa">
      </mat-date-range-input>
      <mat-datepicker-toggle matSuffix [for]=" picker"></mat-datepicker-toggle>
      <mat-date-range-picker #picker></mat-date-range-picker>

      <mat-error *ngIf="range.controls.start.hasError('matStartDateInvalid')">Zła data początkowa</mat-error>
      <mat-error *ngIf="range.controls.end.hasError('matEndDateInvalid')">Zła data końcowa</mat-error>
    </mat-form-field>
  </div>

Answer 1

you can know when change in differents ways

using (dataChange) or (dateInput) in each input:

<mat-date-range-input [formGroup]="range" [rangePicker]="picker">
    <input matStartDate formControlName="start" placeholder="Start date" (dateChange)="startChange($event)">
    <input matEndDate formControlName="end" placeholder="End date" (dateChange)="endChange($event)">
</mat-date-range-input>


startChange(event:MatDatepickerInputEvent)
  {
   console.log("startChange",event.value)
  }
  endChange(event:MatDatepickerInputEvent)
  {
   console.log("endChange",event.value)
  }

Of subscribing to valueChanges of the FormGroup/FormControl. e.g. in ngOnInit

ngOnInit()
  {
    this.range.get('start').valueChanges.subscribe(res=>{
      console.log("valueChange start",res)
    })
    this.range.get('end').valueChanges.subscribe(res=>{
      console.log("valueChange end",res)
    })
    this.range.valueChanges.subscribe(res=>{
      console.log("range Change",res)
    })
  }