angular - 在 FormArray 上使用内置的 Angular 验证器

Question

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

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

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

如何将 Angular 内置验证器与FormArray?

标签： angularangular-reactive-formsangular-forms

Answer 1

formbuild 数组方法指定validatorOrOpts or asyncValidator在表单数组本身上运行的参数而不是数组的控件，因此有两种解决方案

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

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

2. 在每个数组控件上创建自定义验证器并触发角度验证器

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 演示

FormBuilder - 数组