Angular Material Date Validation Incorrect

Question

I am using Angular Material DatePicker, however the default date validation does not work. If I enter '1' or '123', it still can pass the validation. Below is the coding detail.

<mat-form-field>
<input matInput [(ngModel)]="myDate" name="myDate" [matDatepicker]="Datepicker"
                        (click)="Datepicker.open()" >
<mat-datepicker-toggle matSuffix [for]="Datepicker"></mat-datepicker-toggle>
<mat-error>Invaild Date</mat-error>
</mat-form-field>
<mat-datepicker #Datepicker></mat-datepicker>

Answer 1

You need to have the formGroup with the validations speficied as,

this.form = this.fb.group({
      myDate: [this.helper.parseTime(this.data.endTime),
        [Validators.required, Validators.pattern(/^[0-9]{2}.[0-9]{2}$/), this.helper.validateTime]]
    });

and then,

 <mat-error *ngIf="form.controls.myDate.hasError('required')">Invalid Date</mat-error>