Angular formGroup，每个值都有特定的验证器

Question

我有一个包含 3 个值的表单。

 this.testForm = this.formBuilder.group(
      {
        beginDate: ['', [Validators.required]],
        endDate: ['', [Validators.required]],
        username: ['', [Validators.required]],
      },
      { }
    );

我想为每个值放置一个特定的验证器 beginDate 应为 01.xx.xxxx（应始终为该月的第一天） endDate 应为 25.xx.xxxx（应始终为该月的 25 日）用户名应以 'p' 字母开头。

更好的方法是什么？我可以创建一个验证器并使用 if/else 检查，但它不是很漂亮：

this.testForm = this.formBuilder.group(
      {
        beginDate: ['', [Validators.required]],
        endDate: ['', [Validators.required]],
        username: ['', [Validators.required]],
      },
      { validator: this.checkValue}
    );

为我的 fromgroup 的每个值设置一个验证器是否更好？

Answer 1

您可以尝试如下所示的自定义验证器。


function dayOfMonthValidator(date: number): ValidatorFn {
  return (control: AbstractControl): {
    [key: string]: boolean
  } | null => {
    let {  value } = control;
    if (Object.prototype.toString.call(control.value) !== "[object Date]")
      value = Date.parse(value);
    return value.getDate() === date 
      ? null 
      : { "dayOfMonth": true   }
  };
}

并像下面这样使用它：

this.testForm = this.formBuilder.group(
      {
        beginDate: ['', [Validators.required,this.dayOfMonthValidator(1)]],
        endDate: ['', [Validators.required,,this.dayOfMonthValidator(25)]],
        username: ['', [Validators.required]],
      },      
    );

Stackblitz

Angular formGroup，每个值都有特定的验证器

Angular formGroup, have specific validator for each value

angular

formgroups