Material Datepicker two way binding with ngModel?

I have a stepper process form and on the first step the user is asked to pick a date using the Angular Material design Datepicker component.

When the user goes to the next step I want to bind the value they selected and show it again at the top in an input field (they should be able to change it here as well).

I've tried [(ngModel)] but not sure if I'm using it properly.

<mat-form-field>
<input [(ngModel)]="date" formControlName="dateFormCtrl" matInput
[matDatepicker]="picker" [max]="maxDate" [min]="minDate"
placeholder="When is your event?" readonly>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
<mat-error>The input is required.</mat-error>
</mat-form-field>

Continue reading...