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.