I have an issue with the native mat-input type date. At the moment if a user manually types in a date that isn't a real date i.e. 02/31/2022 the value of the input isn't set which leaves it with a "required" error. Obviously, that would make sense and does stop the user and makes them change the date to something that does exist. I'd like something a little more user friendly.

The Material DatePicker handles this very nicely https://material.angular.io/components/datepicker/overview

When this situation happens it rounds it up to the next available date i.e. 02/30/2022 -> 03/01/2022. However, it is very important that I achieve this goal using the native tag.

<mat-form-field required>
         <mat-label>Date</mat-label>
         <input matInput type="date" formControlName="dateControl"/>
</mat-form-field>

Some ideas that I am researching and will add to this post if I find insight

1. Disabling typing the date manually (forcing use of the DatePicker UI)
2. Rounding up the date to a useful date