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()。