向FormArray提供除空数组以外的任何内容时，角度自定义验证器会中断

如何解决向FormArray提供除空数组以外的任何内容时，角度自定义验证器会中断

我有一个用于FormArray的自定义验证程序，只要FormArray的输入为[]，验证程序就可以正常工作。但是，如果我为FormArray提供string[]或FormControl[]，则验证器将破坏整个角度应用程序，并导致无限循环错误。

我真的不确定是什么导致了这种情况的发生。我需要能够使用元素实例化FormArray，所以我需要它来工作。

起初，我认为问题是由于我将string[]而不是FormControl[]传递给FormArray引起的，但是即使将数组映射到FormControls的数组后，我也得到了相同的结果问题。

this.alertData.alertContacts只是一个电子邮件字符串数组。

FormGroup实例化-工作

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

FormGroup实例化-损坏

this.form = this.formBuilder.group({
      alertContacts: this.formBuilder.array(this.alertData.alertContacts,});

FormGroup实例化-损坏

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

自定义验证器

export function alertContactsArrayValidator(): ValidatorFn {
  return (c: AbstractControl): { [key: string]: any } | null => {
    let formArray = <FormArray>c;
    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;
  };
}

解决方法

您需要检查control.errors是否为空。

formControls.forEach(control => {
      let controlErrors: ValidationErrors = control.errors;
      if (controlErrors){ //<---this "if"
        Object.keys(controlErrors).forEach(key => {
          if (key === 'email') {
            hasEmailErrors = true;
            console.log("key has email");
          }
        });
      }
    });

您还可以简化

formControls.forEach(control => {
   if (control.errors && control.errors.email){
        hasEmailErrors = true;
        console.log("key has email");
   }
});

偶

formControls.forEach(control => {
   hasEmailErrors = hasEmailErrors ||
      (control.errors && control.errors.email)
   }
});

注意：我想你想做

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

FormsControls具有必需的电子邮件验证器，而数组则是自定义验证器