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])
)

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

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上使用内置的角度验证器

1 个答案: