Angular (7): Materials, Datepicker, Validation not validating correctly (always invalid)

Question

Using the Angular Materials datepicker. When I choose a date from the datepicker, the field shows up red as invalid.

Heres's the template:

<form [formGroup] = "addEvent"  (ngSubmit)="onSubmit()">
   <mat-form-field>
    <input matInput formControlName = "eventDate" [matDatepicker] = "eventDate" placeholder = "Choose a date">
   <mat-datepicker-toggle matSuffix [for] = "eventDate"></mat-datepicker-toggle>
   <mat-datepicker #eventDate></mat-datepicker>
  </mat-form-field>
 </form>

Here's the Reactive forms code. The regex is tested and works with or without leading zeroes.

  addEvent = this.formBuilder.group({
    eventDate: ['', Validators.pattern('[0-9]?[0-9]{1}\/[0-9]?[0-9]+\/[0-9]{4}')]
  });

Answer 1

just create a ValidatorFn and add it to the Validators arrays of FormControl. here is a simple demo;

https://stackblitz.com/edit/angular-1egypt