Angular (7): Materials, Datepicker, Validation 未正确验证（始终无效）

Question

使用 Angular 材料日期选择器。当我从日期选择器中选择一个日期时，该字段显示为红色，表示无效。

这是模板：

<form [formGroup] = "addEvent"  (ngSubmit)="onSubmit()">
   <mat-form-field>
    <input matInput formControlName = "eventDate" [matDatepicker] = "eventDate" placeholder = "Choose a date">
   <mat-datepicker-toggle matSuffix [for] = "eventDate"></mat-datepicker-toggle>
   <mat-datepicker #eventDate></mat-datepicker>
  </mat-form-field>
 </form>

这是响应式表单代码。正则表达式经过测试，无论是否带有前导零都可以使用。

  addEvent = this.formBuilder.group({
    eventDate: ['', Validators.pattern('[0-9]?[0-9]{1}\/[0-9]?[0-9]+\/[0-9]{4}')]
  });

Answer 1

只需创建一个 ValidatorFn 并将其添加到 FormControl 的验证器数组中。这是一个简单的演示；

https://stackblitz.com/edit/angular-1egypt

Angular (7): Materials, Datepicker, Validation 未正确验证（始终无效）

Angular (7): Materials, Datepicker, Validation not validating correctly (always invalid)

datepicker

angular

angular-material-7