Angular 8: problem with mat-datepicker. I try to use [startAt] to forbid to choose a date before today

Question

I have two datepicker in a Angular 8 form. I'd like to disable the dates before the date you use the form. But I don't find the solution. By default the selected date is today's date but I still can choose a date in the past.

In create-project.component.html:

<mat-form-field>
  <mat-label for="date">Starting date</mat-label>
  <input matInput [matDatepicker]="date" placeholder="Choose a starting date" formControlName="date">
  <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
  <mat-datepicker #date [startAt]="startDate"></mat-datepicker>
  <mat-error *ngIf="form.controls['date'].invalid">{{getErrorMessage('date')}}</mat-error>
</mat-form-field>

In the ts:

export class CreateProjectComponent implements OnInit {
  startDate = new Date();
}

Thanks for your help

Answer 1

Instead of using startAt at mat-datepicker, use min in input tag.

.html

<mat-form-field>
  <mat-label for="date">Starting date</mat-label>
  <input matInput [matDatepicker]="date" [min]="startDate" placeholder="Choose a starting date" formControlName="date">
  <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
  <mat-datepicker #date></mat-datepicker>
  <mat-error *ngIf="form.controls['date'].invalid">{{getErrorMessage('date')}}</mat-error>
</mat-form-field>