Angular FormArray自定义验证程序未触发

Question

在我的FormGroup中，有一个FormArray包含n个FormControls，每个FormControls都有一个电子邮件验证器。

我希望我的FormArray能够知道是否有任何FormArray控件有电子邮件验证错误，如果有，则FormError errors属性应设置为{email:true}。

为此，我编写了一个应用于FormArray的自定义验证器。但是，当FormControl元素被添加或从FormArray中移除时，此验证器似乎不能正确触发。

this.form = this.formBuilder.group({
      alertContacts: this.formBuilder.array(this.alertData.alertContacts, [Validators.required, alertContactsArrayValidator]),
    });

此表单数组由子组件控制，该子组件在实例化时将formArray的一个crefenece作为输入传递给它。子组件中向formArray添加值的方法是

  pushToFormcontrol(value: any) {
    if(!this.fArray.value.includes(value)){
      if(this.usesAutocomplete){
        if(this.autocompleteData.some(el => el === value)) {
          this.fArray.push(this.formBuilder.control(value));
          this.filterAutocomplete();
          this.clearInput();
        }
      } else {
          this.fArray.push(this.formBuilder.control(value, [Validators.email]));
          this.clearInput();
      }
    }
    this.fArray.markAsDirty();
  }

export function alertContactsArrayValidator(): ValidatorFn {
  return (formArray: FormArray): { [key: string]: any } | null => {
    console.log(formArray);
    let hasEmailErrors = false;
    let formControls = formArray.controls;
    console.log(formControls);
    formControls.forEach(control => {
      let controlErrors: ValidationErrors = control.errors;
      console.log("Current control errors: ", controlErrors);
      Object.keys(controlErrors).forEach(key => {
        if (key === 'email') {
          hasEmailErrors = true;
          console.log("key has email");
        }
      });
    });
    return hasEmailErrors ? {email: true} : null;
  };
}

经过进一步的实验，我发现了一些有趣的东西。如果我修改我的FormArray以便插入一个空数组而不是我的this.alertdata.alertcontacts（字符串数组），验证器可以完美地工作。我开始认为这是我创建FormArray的方式的问题。

this.form = this.formBuilder.group({
      alertContacts: this.formBuilder.array([], [Validators.required, alertContactsArrayValidator]), //An empty array works fine
    });

如果我想用已经在其中的元素实例化我的FormArray，我是否应该用不同的方式来完成它，而不是仅仅将数组作为this.formbuilder.array()方法的第一个参数传递？

Answer 1

与validator不同，validatorfn应该手动触发（Angular不会调用它本身来让您传递一些有用的配置）如下所示：

this.form = this.formBuilder.group({
  alertContacts: this.formBuilder.array(
    this.alertData.alertContacts,
    [Validators.required, alertContactsArrayValidator()]
  ),
});

编辑：

this.form = this.formBuilder.group({
  alertContacts: this.formBuilder.array(
    this.alertData.alertContacts.map(x => new FormControl(x, [
      Validators.required,
      alertContactsArrayValidator()
    ])),
  ),
});