如何将自定义验证器添加到 FormArray？

Question

我想向表单添加自定义验证器，以防止 mat-step 切换到下一步。当我使用 FormGroups 时一切正常，但是当我必须使用 FormArray 时我无法实现验证。

我已经尝试了至少两种在表单初始化时分配验证器的变体：

• 数组内部

statuses: this._formBuilder.array([this.createStatus()], defaultStatusValidator())

• 数组的父形式内部

this.productionLineStatuses = this._formBuilder.group({statuses: this._formBuilder.array([this.createStatus()])}, {validator: defaultStatusValidator()});

但是这种尝试会导致错误（可能是在铸造验证器时）：

TypeError: Cannot convert undefined or null to object 
    at Function.keys (<anonymous>)
    at FormGroup.validate [as validator] (default-status.directive.ts:6)
    at FormGroup._runValidator (forms.js:3438)
    at FormGroup.updateValueAndValidity (forms.js:3399)
    at new FormGroup (forms.js:4097)
    at FormBuilder.group (forms.js:7578)
    at CreateProductionLineComponent.ngOnInit (create-production-line.component.ts:31)

在以下情况下不会抛出错误，但验证器也不起作用。这是我的其余代码和我的自定义验证器：

TypeError: Cannot convert undefined or null to object 
    at Function.keys (<anonymous>)
    at FormGroup.validate [as validator] (default-status.directive.ts:6)
    at FormGroup._runValidator (forms.js:3438)
    at FormGroup.updateValueAndValidity (forms.js:3399)
    at new FormGroup (forms.js:4097)
    at FormBuilder.group (forms.js:7578)
    at CreateProductionLineComponent.ngOnInit (create-production-line.component.ts:31)

验证器：

ngOnInit() {
    this.productionLineDetails = this._formBuilder.group({
      productType: ['', Validators.required],
      language: ['', Validators.required],
      name: ['', Validators.required],
      description: [''],
    });
    this.productionLineStatuses = this._formBuilder.group({
      statuses: this._formBuilder.array([
        this.createStatus()
      ])
    }, defaultStatusValidator());
    this.statuses = this.productionLineStatuses.get('statuses') as FormArray;
    this.statusError = false;
  }

我应该如何正确地将验证器添加到 FormArray？

Answer 1

您已经考虑过您的 FormArray 是 FormControls 的 FormArray 还是 FormGroups 的 FormArray，但问题是您如何迭代控件，

两者的简单例子

export function customValidateArray(): ValidatorFn {
    return (formArray:FormArray):{[key: string]: any} | null=>{
      let valid:boolean=true;
      formArray.controls.forEach((x:FormControl)=>{
          valid=valid && x.value=="a"
      })
      return valid?null:{error:'Not all a'}
    }
  };

export function customValidateArrayGroup(): ValidatorFn {
    return (formArray:FormArray):{[key: string]: any} | null=>{
      let valid:boolean=true;
      formArray.controls.forEach((x:FormGroup)=>{
          valid=valid && x.value.name=="a" 
      })
      return valid?null:{error:'Not all name are a'}
    }
  };

你可以在stackblitz 中看到一个例子

注意：为了创建表单，我使用了 FormGroup、FormControl 和 FormArray 的构造函数，但您也可以使用 FormBuilder。

注意 2：不必将 FormArray 包含在 FormGroup 中