Angular FormArray 字段的自定义验证（响应式表单）

Question

我是 Angular 的新手，想了解如何为 FormArray 执行自定义字段验证？

FormArray 是动态的，您可以在其中推送或删除 FormGroup 项目。 FormGroup 由field1、field2、field3 组成。如果其中一个字段不为空，则其他字段应设置为validators.required。如果所有字段都为空或已填充，则表单有效。

谢谢。

下面是代码示例：

formA!: FormGroup;

initializeForm(): void {
    this.formA = this.fb.group({
      item1: this.fb.array([this.createItem1()]),
      item2: this.fb.array([this.createItem2()]),
    });
  }

createItem1(): FormGroup {
   return this.fb.group({
       field1: null,
       field2: null,
       field3: null,
   });
}

Answer 1

试试这个。

createItem1(): FormGroup {
  const fg = this.fb.group({
      field1: null,
      field2: null,
      field3: null,
  });
   
  const validatorFn = (control: AbstractControl): { [key: string]: any } | null => {
    const obj = fg.getRawValue();
     
    if (obj.field1 || obj.field2 || obj.field3) {
      return Validators.required(control);
    }
     
    return null;
  };
   
  for (const control of Object.values(fg.controls)) {
    control.setValidators(validatorFn);
  }

  return fg;
}

此外，您还需要在按下按键时对所有控件执行 updateValueAndValidity()。

Angular FormArray 字段的自定义验证（响应式表单）

Angular custom validation for FormArray fields (Reactive Form)

angular

angular-reactive-forms

formarray

formgroups