Angular material date picker: check invalid date for not required date field

Issue

Angular material date picker returns moment object and it returns null for both invalid date format as well as null/empty date field.

Is there any way to distinguish between invalid date format and empty date.

Solution

If you are using Angular's Reactive Forms, you can include Validator methods on the Form Controls, such that they will be flagged with the respective errors.

yourForm = this.formBuilder.group({
  date: [null, Validators.required]
});

You can access the errors on the above Abstract Control by calling the errors property, as specified on the documentation.

this.yourForm.controls.date.valid;
// returns true or false

If you want to check for a specific error, such as required, you may make use of the hasError() method

this.yourForm.controls.date.hasError('required');

Answered By - wentjun