FormArray 字段的角度自定义验证（反应式表单）

Posted 2023-03-25

【中文标题】FormArray 字段的角度自定义验证（反应式表单）

【英文标题】：Angular custom validation for FormArray fields (Reactive Form)

【发布时间】：2022-01-02 12:57:53

【问题描述】：

我是 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,
   );

【参考方案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()。

【讨论】：

嗨，我在尝试此操作时在“fg.controls”遇到了以下问题。可以建议吗？类型 ' [key: string]: AbstractControl; ' 必须有一个返回 iterator.ts(2488) 的 '[Symbol.iterator]()' 方法

修正了我的答案。请再次检查。

您好，感谢您的帮助。我做了一些更改以适应我的用例，并添加了额外的条件以在不需要时清除验证器。总的来说，它最终会奏效。