角度(7):材料,日期选择器,验证未正确验证(始终无效)

时间:2019-06-10 11:28:48

标签: angular datepicker angular-material-7

使用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>

这是Reactive表单代码。正则表达式经过测试,可以使用或不使用前导零。

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

1 个答案:

答案 0 :(得分:1)

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

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