Angular 物料日期选择器拣货日期自动对焦离开

Question

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

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

任何人都可以帮助解决这个问题吗？

堆栈闪电链接

Answer 1

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

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

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

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

<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>

该逻辑应该包含在自定义表单控件中，或者至少包含在专用组件中，因为它是模块化的，并且在多个位置放置会导致许多错误。