Angular Reactive Forms 验证日期年份四位数

Question

我使用 Angular 响应式表单，我希望我的日期格式优先有效（在两个现有验证器之前）。我的有效格式是 dd/MM/YYYY（ 而不是 dd/MM/YY）。我使用 bootstrap v4 日期选择器。

我的表格：

this.myForm = this.fb.group({
  'day': ['', [Validators.required, minDateValidator(this.todayMoment.toDate()), businessDayValidator()]]
});

我的验证者：

export function minDateValidator(minDate: Date): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} | null => {
    const invalid = control.value < minDate.setHours(0, 0, 0);
    return invalid ? {'minDate': {value: control.value}} : null;
  };
}

export function businessDayValidator(): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} | null => {
    const invalid = !DateUtilsService.isBusinessDay(moment(control.value));
    return invalid ? {'businessDay': {value: control.value}} : null;
  };
}

我试着加上这个Validators.pattern('(2|1)[0-9]{3}-[0-9]{2}-[2-9]{2}.*')

online regex exec 可以，但在 Angular 中不行（打印此错误）：

{ "pattern": { "requiredPattern": "^(2|1)[0-9]{3}-[0-9]{2}-[2-9]{2}.*$", "actualValue": "2019-04-15T10:00:00.000Z" } }

Answer 1

将模式作为正则表达式而不是字符串传递，如下所示：Validators.pattern(/^(2|1)[0-9]{3}-[0-9]{2}-[2 -9]{2}.*/)

Answer 2

bootstrap 日期选择器中的问题是 "the value is a date not a string"。

this.myForm = this.fb.group({
  'day': ['', [Validators.required, formatValidator(), minDateValidator(this.todayMoment.toDate()), businessDayValidator()]]
});

export function formatValidator(): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} | null => {
    const dateRegEx = new RegExp('^(2|1){1}[0-9]{3}.[0-9]{2}.[0-9]{2}.*$');
    const dateInput = control.value as Date;
    const match = dateInput.toISOString && dateRegEx.test(dateInput.toISOString());
    return  match ? null : {'formatValidator': {value: control.value} };
  };
}

Angular Reactive Forms 验证日期年份四位数

Angular Reactive Forms validation date year four digits

regex

date

angular

angular-reactive-forms