Angular Material 日期选择器 (MatDatepicker) 自动完成焦点移出时的日期

Question

我在我的项目中使用 Angular Material/mat-datepicker，每当用户在其中输入一位数字并失去焦点时 - 日期选择器会自动填充随机日期。

Example

只需输入 1 即可失焦，或输入 5/5/20

日期选择器自动添加日期

更新:我还使用响应式(Reactive)表单，并使用该方法验证输入

我可以禁用这个吗？

Answer 1

我知道现在回答这个问题已经太晚了。但是，我也遇到了与响应式(Reactive)表单相同的问题，并通过以下方式禁用了 MatDatePicker 自动完成功能。

<mat-form-field>
   <input matInput #autocomplete placeholder="Choose a date" formControlName="datePicker">
   <input type="hidden" [matDatepicker]="picker" placeholder="Choose a date" formControlName="datePicker" (dateChange)="autocomplete.value = toFormattedDate($event.value)">
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

在组件中创建以下“toFormattedDate”方法。

toFormattedDate(iso: string) {
  const date = new Date(iso);
  console.log(date);
  return `${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()}`;
}