焦点休假时自动选择角材料日期选择器的日期

Question

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

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

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

stackblitz link

Answer 1

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

您应该在显示输入字段上监听模糊事件，并在无效的情况下清除表单字段值。 主要问题是新的日期（数字）是有效日期。日期选择器会将您的输入转换为日期，并将其作为新的字段值发出。可以对模糊事件执行自定义逻辑，可能使用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>

此逻辑应该包装在自定义窗体控件中，或者至少包装在专用组件中，因为它是模块化的，并且在多个位置使用它会导致很多错误。