invoke a call on select date in using mat-date-range-picker that uses mat-date-range-picker-actions

Question

I want to use angular material date picker functionality to bind my dates with angular reactive forms. in normal case when i use the date picker functionality, the date immediately cause the formControl to change upon interaction. But when I use mat-date-range-picker-actions to add input and button elements, the formControl is only changed when the apply button is pressed. I want the formControl to change when the date element is interacted, i.e. the date element from/to is selected.

The reason I want to do this is because if the date element is selected the result is reflected on span text element, as a string interpolation, right away for the user to see.

how can this problem be fixed.

the code and image are provided below. html

  <mat-form-field class="example-form-field">
    <mat-label>Enter a date range</mat-label>
    <mat-date-range-input [formGroup]="form" [rangePicker]="rangePicker">
      <input formControlName="from" matStartDate placeholder="Start date">
      <input formControlName="to" matEndDate placeholder="End date">
    </mat-date-range-input>
    <mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
    <mat-datepicker-toggle [formGroup]="form" matIconSuffix [for]="rangePicker"></mat-datepicker-toggle>
    <mat-date-range-picker [formGroup]="form" #rangePicker>
      <mat-date-range-picker-actions *ngIf="true">
          <div style="padding-bottom: 10px;" class="custom-actions">
              <div style="display: flex; padding: 0 5px;">
                <div style="flex: 1">
                  <span>Start Time:</span> 
                </div>
                <div style="flex: 1">
                  <span>{{ formatDate(from?.value) }}</span>
                </div>
                <div style="flex: 1">
                  <input type="time">
                </div>
              </div>
              <div style="margin-top: 15px; display: flex; padding: 0 5px;">
                <div style="flex: 1">
                  <span>End Time:</span>
                </div>
                <div style="flex: 1">
                  <span>{{ formatDate(to?.value) }}</span>
                </div>
                <div style="flex: 1">
                  <input formControlName="timeFrom" type="time">
                </div>
              </div>
  
              <div style="display: flex; justify-content: flex-end; margin-top: 10px;">
                <button mat-raised-button color="primary" matDateRangePickerApply >Apply</button>
              </div>
          </div>
      </mat-date-range-picker-actions>
    </mat-date-range-picker>
  </mat-form-field>

TS

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  @ViewChild('rangePicker') picker: MatDateRangePicker<Date> | undefined;

  public form = new FormGroup({
    from: new FormControl(new Date),
    to: new FormControl(new Date),
    timeFrom: new FormControl('')
  })

  get from(){
    return this.form?.get('from');
  }

  get to(){
    return this.form?.get('to');
  }

  ngOnInit(){
    this.form.valueChanges.subscribe(data => {
      console.log(data);
    })

  }

  formatDate(date?: any) {
    return `${date?.getFullYear()}-${date?.getMonth()}-${date?.getDay()}`;
  }


}

In the following picture, before pressing the apply button, the date that is selected is from 10 to 18 but the text in in the form shows dates from 1 to 5

Answer 1

solution 1:

{{form.value.from | (can use date pipe here to format date)}}

solution 2:

`ngOnInit(): void {
this.form.valueChanges.pipe(distinctUntilChanged()).subscribe((data) => {
      console.log(data);
   // can trigger function from here or 
    });
}`