Components: DatePicker not updating ngModel value

[sarbull]

Bug?

I have this Date Picker example

<mat-form-field>
  <input matInput [(ngModel)]="from" [matDatepicker]="from" (change)="onChangeEvent($event)" placeholder="From">

  <mat-datepicker-toggle matSuffix [for]="from"></mat-datepicker-toggle>
  <mat-datepicker #from></mat-datepicker>
</mat-form-field>

import {Component} from '@angular/core';

@Component({
  selector: 'date-filter',
  templateUrl: 'date.filter.html',
})
export class DateFilter {
  from: any;

  onChangeEvent(e): void {
    console.log(e.target.value);
    console.log('this.from = ', this.from);
  }
}

What is the expected behavior?

On date change i should have the value in this.form.

What is the current behavior?

It doesn't update the model and i get this error: Uncaught Error: Cannot assign to a reference or variable!.

[dhrn]

please ask this question in StackOverflow

[sarbull]

I just found the solution myself, thank you for your awesome support.

<mat-form-field>
  <input matInput [(ngModel)]="fromDate" [matDatepicker]="from" (change)="onChangeEvent($event)" placeholder="From">

  <mat-datepicker-toggle matSuffix [for]="from"></mat-datepicker-toggle>
  <mat-datepicker #from></mat-datepicker>
</mat-form-field>

I had to update the [(ngModel)] to [(ngModel)]="fromDate" differently from [matDatepicker]="from".

Completely unintuitive.

[dhrn]

please use (dateChange)="onValueChange($event) instead of change

[sarbull]

@dhrn it was just for debugging purposes

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}