Angular Material 日期选择器验证问题

Question

我正在验证一个简单的 Angular Material 日期选择器。这很奇怪，因为当我点击小日历时它工作正常，但只要我点击输入字段并在选择日期之前，颜色就会变成红色，如下所示：

这是标记模板：

    <mat-form-field class="datePicker">
        <input matInput [matDatepicker]="picker" (click)="picker.open()" readonly=true
            placeholder="Choose a date range" formControlName="dateRange">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>

这是打字稿：

export class TrackingPanelComponent {


  toppingList: string[] = ['Machine A', 'Machine B', 'Machine C', 'Machine D'];

  constructor(private fb: FormBuilder) { }

  formGroup = this.fb.group({
    selectMachine: [null, Validators.required],
    dateRange: [null, Validators.required],
    trackingPath: [false],
    latestPosition: [false]
  })

  clearAll(){
    this.formGroup.reset()
  }
}

我知道这是因为(click)="picker.open()"但我需要保留它以更轻松地打开日期选择器。任何想法来解决它？

Answer 1

问题是通常点击输入会增加焦点。然而，当调用该picker.open()方法时，我们立即失去焦点 - 这导致验证器注册触摸并因此显示验证错误。这是我所做的

1 禁用默认焦点行为

我们想阻止浏览器在mouseDown上添加焦点（注意我们绑定到 (mousedown) 而不是 (click) 因为这是默认情况下会发生焦点的地方）

(mousedown)="picker.open();$event.preventDefault()"

2 日期选择器关闭时验证表单

我通过在 formControl 上调用 markAsTouched 来做到这一点。注意- 而是绑定到 component.ts 文件中的方法。

<mat-datepicker #picker (closed) = "formGroup.get('dateRange').markAsTouched()"></mat-datepicker>

完整示例

<mat-form-field class="datePicker">
   <input matInput [matDatepicker]="picker" 
       (mousedown)="picker.open(); $event.preventDefault" 
       readonly=true
       placeholder="Choose a date range" formControlName="dateRange">
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker #picker 
      (closed) = "formGroup.get('dateRange').markAsTouched()"></mat-datepicker>
</mat-form-field>