角度材料日期选择器在焦点离开时自动选择日期

Question

我正在使用 Angular 材料日期选择器，在将单个或多个数字输入输入字段然后离开焦点或单击外部时出现问题，日期选择器自动选择日期。

我不想那样选。如果不只是将输入字段设置为错误状态，我希望用户输入完整日期。

谁能帮忙解决这个问题？

stackblitz link

Answer 1

如何使用假字段输入来输入文本并隐藏它下面的日期选择器/表单字段，以便日期选择器在正确的位置打开（它将打开下面的字段 [matDatepicker])。

您应该在显示输入字段上监听模糊事件，如果无效，则清除表单字段值。 主要问题是 new Date(number) 是一个有效日期。日期选择器会将您的输入转换为日期并将其作为新字段值发出。可以对 blur 事件执行自定义逻辑，可能使用 moment.js 到 Check if a string is a date value。

如果它是无效的真实表单字段值应该设置为null。

当通过日期选择器选择日期或显示初始值时，还应更新显示字段值。

<mat-form-field [formGroup]="dateFormGroup">
  <input matInput (blur)="onBlurEvent($event)" placeholder="Choose a date">
  <input type="hidden" formControlName="date" [matDatepicker]="picker">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

这个逻辑应该封装在自定义表单控件中，或者至少封装在一个专用组件中，因为它是模块化的，并且在多个地方放置会导致很多错误。