How to add mask for angular material date range picker?

Question

Hello I am using angular material date range picker. (angular material 14).

 <mat-form-field appearance="fill">
      <mat-date-range-input [rangePicker]="picker" [max]="today">
        <input matStartDate [(ngModel)]="item.startValue" [placeholder]="'Of' | translate " #dateRangeStart
          (keypress)="validation($event, index)">
        <input matEndDate [(ngModel)]="item.endValue" [placeholder]="'Till' | translate" #dateRangeEnd
          (dateChange)="dateRangeChange(index)" (keypress)="validation($event, index)">
      </mat-date-range-input>
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-date-range-picker #picker (closed)="afterClose(item, index)"></mat-date-range-picker>
    </mat-form-field>

ts file

validation(event: { which: number; keyCode: number; key: string }, index: number) {

if (this.filterList[index].validation) {
  const charCode = (event.which) ? event.which : event.keyCode;
  if (this.filterList[index].type == 'date') {
    const dateRegEx = new RegExp(/^\d{1,2}\.\d{1,2}\.\d{4}$/);
    return dateRegEx.test(this.filterList[index].startValue) ? null : { date: true }
  }
  if (eval(this.filterList[index].validation)) {
    return true;
  }

  return false;
}

}

I want to write only numbers and format should be dd/mm/YYYY. If I choose date from format is correct but when I writing on keyword and write to number it doesn't show me automatically '/' character. I have problem when I writing on keyboard, date doesn't split by / If I unfocused input. Therefor I can write 1111111111111