Angular 5 Validators.pattern（'（0 \ d {1} | 1 [0-2]）\\ /（[0-2] \ d {1} | 3 [0-1]）\\ /（19 | 20）\ d {2}'）不工作

Question

输入字段总是显示错误，有人可以帮助我。

var dateRegEx = /^(0\d{1}|1[0-2])\/([0-2]\d{1}|3[0-1])\/(19|20)\d{2}$/;
hiredate: new FormControl({value:null}, Validators.compose([Validators.required,Validators.pattern(dateRegEx)])),

这也行不通。

更新：我使用mat-datepicker控件，如果我们输入默认的mm dd yyyy格式，则将控件值自动设置为javascript日期，否则设置为null。

                        <mat-form-field>
                                <input matInput id="hiredate" name="hiredate" required [matDatepicker]="picker1" placeholder="Hire Date" formControlName="hiredate">
                                <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
                                <mat-datepicker #picker1></mat-datepicker>
                                <mat-error *ngIf="isFieldInvalid('hiredate')">
                                    Please provide Hire Date
                                  </mat-error>
                              </mat-form-field>

请检查我的答案。

Answer 1

经过调试后我发现，垫层mat-datepicker自动将输入值设置为Date值，并且它接受默认格式为mm [ - /。 ] DD [ - /。 ]] yyyy如果用户以此格式输入，则将控制值设置为日期值，该值未通过日期模式验证。如果用户提供不同的模式输入，则将控制值设置为NULL。

import {Injectable} from "@angular/core";
import {FormControl} from "@angular/forms";


@Injectable()
export class DateValidator {

   constructor() {
   }

   static date(c: FormControl) {
      //const dateRegEx = new RegExp(/^(0\d|1[0-2])\/([0-2]\d|3[0-1])\/(19|20)\d{2}$/);
     //console.log('Date Value is:',c.value);
     return c.value!=null ? null : {
           dateValidator: {
              valid: false
          }
     };
  }
}

并使用验证器定义控件

hiredate: new FormControl({value:null}, Validators.compose([Validators.required,DateValidator.date])),

现在验证器与mat-datepicker一起工作正常