Angular material 2 datepicker with [ngmodel] Angular material 2 datepicker with [ngmodel] angular angular

Angular material 2 datepicker with [ngmodel]


Angular provides two ways of using forms: template-driven or reactive. You're mixing those two up, while you should choose which one you want to use. The docs can guide you in this choice.

Should you choose template-driven, you can use [(ngModel)] (like your method 1).

<input matInput [matDatepicker]="datepicker1" placeholder="Start Date" [(ngModel)]="startDate" required>startDate = new Date();

Choose reactive and you can use [formControl] with a FormControl in your controller (like your method 3).

<input matInput [matDatepicker]="datepicker1" placeholder="Start Date" [formControl]="startDate">startDate = new FormControl(new Date(), Validators.Required);// Use `startDate.value` to get the value of the control

Never use [value] if you don't know what you're doing or it will give you unexpected results.