how to validate date and show error when it not in the correct format

Question

I have a date (with momentjs). the date must be in DD/MM/YYYY format.

My hmtl code is:

<mat-form-field>
            <input id="datanint" formControlName="dateBirth" matInput [matDatepicker]="picker" />
            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
            <mat-datepicker #picker startView="multi-year" [startAt]="startDate"></mat-datepicker>

        </mat-form-field>

My control is:

dateBirth: [DateValidator.validateDate],

this is my validator:

export class DateValidator implements Validators {


  static validateDate(fdValue: AbstractControl) {
regexDate="...:";
    console.log(fdValue);
   if(fdValue != null && fdValue.value!= null && fdValue.value.match(regexDate) {
     return { pattern: true };
   }
}

The problem is that when I put a Date like this (13/13/2000), I want that in my errors (in form control) there is the pattern error but it not in this way because the fdValue.value is equals to null (when input value is 13/13/2000). I need that fdValue.value (or something that I can use to get the correct value) must be the same in input value also date doesn't in the correct format.

Answer 1

In this Scenerio, you can not get value of fromControl and it will always shows you null for console.log(fdValue.value); Because may be you are passing some some invalid input in datepicker input. So when you put invalid value to datepicker your fdValue is null but you still can get your input in error object

 static validateDate(fdValue: AbstractControl) {
    const date = fdValue.value;
    console.log('date: ',fdValue);
    console.log('error: ',fdValue.errors?.matDatepickerParse?.text);
    if (date ===null || date==='') return { requiredFromDate: true };
  
  }

but when you put invalid date input you will get fdValue.value is null errors objects contains that input value

For checking code please check angular-customvalidator-by-naib