Angular (7)：材料、日期选择器、验证未正确验证（始终无效）答案

【问题标题】：Angular (7): Materials, Datepicker, Validation not validating correctly (always invalid)Angular (7)：材料、日期选择器、验证未正确验证（始终无效）
【发布时间】：2019-06-10 11:28:48
【问题描述】：

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

这是模板：

<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}')]
  });

【问题讨论】：

来自stackoverflow.com/questions/53333497/…，我引用...这是因为 matDatepicker 绑定了一个 Date 对象，而不是像“AAA-MM-DD”这样的简单字符串...
所以，@AkberIqbal，我假设我必须创建一个自定义验证器，没有简单的捷径吗？另外，我不确定如何在这里做到这一点，你能帮忙吗？谢谢
您可以将 mat-datapicker 中的目标值分配给单独的 formcontrol 变量并对其进行验证...但这将是一种解决方法（不是一种干净的方法）...
@AkberIqbal 什么是干净的方式？
自定义验证

标签： angular datepicker angular-material-7

【解决方案1】：

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

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

【讨论】：

我很高兴它有帮助。