在 FormArray 上使用内置 Angular 验证器

Question

我使用 FormBuilder 为一组电子邮件字段实例化了一个 FormArray。我给它分配了一组 Validator，其中包括自定义 Validator 和 Angular 的内置 Validators.email。

this.formBuilder.array(
    [this.formBuilder.control('')], 
    Validators.compose([customValidator, Validators.email])
)

以这种方式分配 Validator 意味着 FormArray 作为 control 参数传递给验证器。我的自定义验证器可以调整为期望 FormArray，但 Validators.email 期望具有单个值的 FormControl。

如何将 Angular 内置验证器与 FormArray 一起使用？

Answer 1

formbuild 数组方法指定 validatorOrOpts or asyncValidator 参数转到运行表单数组本身而不是数组的控件所以有两个解决方案

将验证器添加到它自己的控件中

   this.formBuilder.array(
    [this.formBuilder.control('',Validators.email)], 
    Validators.compose([customValidator])
)

创建自定义验证器并在每个数组控件上触发 angular 验证器

function customArrayEmailValidator(formArray: FormArray) {
  if (formArray.length > 0) {
    for (let c of formArray.controls) {
      let state = Validators.email(c)
      if (state !== null) {
        return { emailInValid: state }
      }
    }
    return null;
  } else {
    return null;
  }
}

但是看起来还是和第一种方式一样

stackblitz demo

FormBuilder - Array

在 FormArray 上使用内置 Angular 验证器

Using built-in Angular Validators on a FormArray

angular

angular-reactive-forms

angular-forms