angular - 如何使用 MomentDateAdapter 检测 Angular Material Datepicker 上的输入错误？

Question

当前，当用户在日期选择器输入中输入无效数据时，它不会被标记为 ng-invalid而是在保存表单时将基础值设置为 null。

我们的 QA 人员对这种行为不满意。用户应该被告知输入值错误，并且在输入值被更正之前不应该保存数据。

有什么简单的方法可以解决这个问题吗？

日期选择器已经知道无法成功解析输入值，那么为什么不应该将该字段标记为无效呢？我真的不想在自定义解析器或验证规则中复制日期解析功能。

我正在使用具有非英语语言环境和格式的 moment.js 适配器。
这是我的日期选择器本地化设置，以防它们与问题有关:

{
    provide: MAT_DATE_LOCALE, useValue: 'lv'
},
{
    provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS,
    // treat all dates as UTC to avoid shifting dates to browser's timezone
    useValue: { useUtc: true }
},
{
    provide: DateAdapter,
    useClass: MomentDateAdapter,
    deps: [
        MAT_DATE_LOCALE,
        MAT_MOMENT_DATE_ADAPTER_OPTIONS
    ]
},
{
    provide: MAT_DATE_FORMATS,
    useValue: {
        parse: {
            dateInput: DEFAULT_DATE_FORMAT
        },
        display: {
            dateInput: DEFAULT_DATE_FORMAT,
            monthYearLabel: 'MMMM YYYY',
            dateA11yLabel: DEFAULT_DATE_FORMAT,
            monthYearA11yLabel: 'MMMM YYYY'
        }
    }
}

// DEFAULT_DATE_FORMAT is defined as "DD.MM.YYYY"

HTML代码:

<mat-form-field>
    <mat-label>My date field</mat-label>
    <input matNativeControl
           name="validTo" formControlName="validTo"
           matInput [matDatepicker]="validToPicker" placeholder="DD.MM.YYYY">
    <mat-datepicker-toggle matSuffix [for]="validToPicker"></mat-datepicker-toggle>
    <mat-datepicker touchUi #validToPicker></mat-datepicker>
    <mat-error>
        <validation-field name="validTo" [form]="form"></validation-field>
    </mat-error>
</mat-form-field>

validation-field组件是一个自定义组件，用于显示字段的所有表单错误。它适用于所有其他情况，例如，对于 Required验证器，但它不会检测到不正确的日期选择器输入的任何表单错误。输入甚至没有标记为 ng-invalid当输入错误数据时。

Answer 1

我建议在表单控件中添加一个自定义验证器。如果您不使用响应式(Reactive)形式，我会推荐它(更高效)。 DEMO

export class DatepickerOverviewExample {
  exampleForm: FormGroup;
  constructor(private fb: FormBuilder) {
    this.exampleForm = this.fb.group({
      date: ['', [Validators.required, CustomValidators.validateDate]]
    });
  }

}


export class CustomValidators {
  static validateDate(control: AbstractControl): object | null {
    if (!control) {
      return;
    }
    const isDateValid = true; // test date
    return isDateValid ? {
      dateInValid: true
    } : null;
  }
}

<mat-form-field [formGroup]="exampleForm">
  <input matInput formControlName='date' [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<div class="error" *ngIf="exampleForm.controls.date.touched && exampleForm.controls.date?.hasError('dateInValid')">
  Invalid Date!
</div>