How to validate Angular Material Datepicker?

Question

I have the following code:

<form [formGroup]="meetingFormGroup">

                  <!-- Date Input -->
                  <mat-form-field>
                    <input
                      matInput
                      [min]="minDate"
                      [max]="maxDate"
                      [matDatepicker]="picker"
                      placeholder="Choose a date"
                      formControlName="date"
                      required
                    >
                    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                    <mat-datepicker #picker></mat-datepicker>

                    <mat-error *ngIf="meetingFormGroup.controls['date'].hasError('required')"
                      >Please choose a date.</mat-error
                    >
                    <mat-error *ngIf="?????"
                      >Entered date is too small.</mat-error
                    >
                  </mat-form-field>
                </form>

Now on the Angular Material Website at the 'Date Validation' section I read the following:

Each validation property has a different error that can be checked:

A value that violates the min property will have a matDatepickerMin error.
A value that violates the max property will have a matDatepickerMax error.
A value that violates the matDatepickerFilter property will have a matDatepickerFilter error.

So my question is, how can I validate these errors in my mat-error tags. What do I need to write in the *ngIf expression field?

I am sorry for my bad English and hope you understand my problem and maybe can provide a solution.

Thanks!

Answer 1

From the Angular Material website (here):

• A value that violates the min property will have a matDatepickerMin error.
• A value that violates the max property will have a matDatepickerMax error.
• A value that violates the matDatepickerFilter property will have a matDatepickerFilter error.

So, you'll use:

• For min - meetingFormGroup.controls['date'].hasError('matDatepickerMin')
• For max - meetingFormGroup.controls['date'].hasError('matDatepickerMax')
• For filter - meetingFormGroup.controls['date'].hasError('matDatepickerFilter').