angular - 在Angular 12中手动输入日期时，Angular Date Picker将无效的日期格式转换为有效的日期

Question

我正在为日期选择器使用自定义日期适配器，当我从选择器中选择日期时，它的格式很好，但是当手动输入不正确的日期时，它被格式化为有效日期，而不是在输入字段上显示错误。例如，当我输入：01/01/01作为日期时，它的格式为：01/01/1901但我想在输入不正确的日期时显示错误。我该如何帮助解决这个问题？

这是自定义日期适配器的代码：

import { NativeDateAdapter } from "@angular/material/core";

  export class CustomDateAdapter extends NativeDateAdapter {

        parse(value: any): Date | null {


  if ((typeof value === 'string') && (value.indexOf('/') > -1)) {
     const str = value.split('/');

     const year = Number(str[2]);
     const month = Number(str[1]) - 1;
     const date = Number(str[0]);

return new Date(year, month, date) || null;

}

 const timestamp = typeof value === 'number' ? value : Date.parse(value);
 return isNaN(timestamp) ? this.invalid() : new Date(timestamp);

}

 format(date: Date, displayFormat: Object): string {
 date = new Date(Date.UTC(
 date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(),
 date.getMinutes(), date.getSeconds(), date.getMilliseconds()));
 displayFormat = Object.assign({}, displayFormat, { timeZone: 'utc' });

  const dtf = Intl.DateTimeFormat(this.locale, displayFormat);
  return dtf.format(date).replace(/[\u200e\u200f]/g, '');

}

}

这是我的 module.ts 文件：

import { DateAdapter} from '@angular/material/core';
import { CustomDateAdapter } from './custom-date-adapter';

 providers: [
    { provide: DateAdapter, useClass: CustomDateAdapter }

]

这是日期选择器代码：

     <mat-form-field class="w-100">
        <mat-label>PAYG start date</mat-label>
        <input matInput [matDatepicker]="picker" [max]="maxDate" formControlName="paygStartDate" required
               placeholder="DD/MM/YYYY">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker startView="multi-year"></mat-datepicker>
      </mat-form-field>

请帮助我在字段中输入错误日期时显示错误，而不是将错误日期转换为有效日期。

标签： angulardateangular-materialdatepicker