如何验证嵌套FormArray中多字段无重复值？

要实现FormArray中多字段组合无重复，可以通过自定义验证器来实现，以下是具体方案：

1. 编写自定义多字段唯一性验证器 #

这个验证器会遍历FormArray中的每个FormGroup，将指定字段的值组合成唯一标识，检查是否存在重复的组合：

import { AbstractControl, ValidatorFn, ValidationErrors } from '@angular/forms';

export function uniqueMultiFieldValidator(fields: string[]): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const formArray = control as FormArray;
    // 数组长度小于等于1时无需验证
    if (!formArray || formArray.length <= 1) return null;

    const valueSet = new Set<string>();
    for (const group of formArray.controls) {
      // 拼接指定字段的值作为唯一键
      const compositeKey = fields.map(field => group.get(field)?.value).join('|');
      if (valueSet.has(compositeKey)) {
        // 找到重复组合，返回错误标记
        return { multiFieldDuplicate: true };
      }
      valueSet.add(compositeKey);
    }
    return null;
  };
}

2. 为FormArray绑定验证器 #

在创建包含Skills的FormArray时，添加这个自定义验证器，指定需要检查的字段（比如skillName和skillLevel）：

import { FormBuilder, FormArray, Validators } from '@angular/forms';
// 导入上面的自定义验证器

@Component({
  // 组件元数据
})
export class AppComponent {
  userForm = this.fb.group({
    // 其他表单控件...
    skills: this.fb.array([], uniqueMultiFieldValidator(['skillName', 'skillLevel']))
  });

  constructor(private fb: FormBuilder) {}

  get skills(): FormArray {
    return this.userForm.get('skills') as FormArray;
  }

  addSkill() {
    const skillGroup = this.fb.group({
      skillName: ['', Validators.required],
      skillLevel: ['', Validators.required]
    });
    this.skills.push(skillGroup);
    // 新增后触发验证更新
    this.skills.updateValueAndValidity({ emitEvent: true });
  }

  removeSkill(index: number) {
    this.skills.removeAt(index);
  }
}

3. 在模板中显示错误提示 #

在Skills区域的合适位置添加错误提示，当存在重复组合时显示：

<div class="skills-container">
  <!-- 技能表单组的循环渲染 -->
  <div *ngFor="let skill of skills.controls; let i = index" [formGroup]="skill">
    <input formControlName="skillName" placeholder="技能名称">
    <input formControlName="skillLevel" placeholder="技能等级">
    <button (click)="removeSkill(i)">移除</button>
  </div>
  <button (click)="addSkill()">添加技能</button>
  
  <!-- 重复错误提示 -->
  <div *ngIf="skills.hasError('multiFieldDuplicate')" class="text-danger">
    存在重复的技能组合，请检查！
  </div>
</div>

说明 #

• 验证器通过Set存储已出现的字段组合，效率更高，一旦发现重复立即返回错误。
• 如果字段值可能包含分隔符|，可以替换成其他不会出现在字段值中的字符（比如###）。
• 每次新增或修改技能字段时，表单会自动触发验证，确保实时检查重复。

内容的提问来源于stack exchange，提问作者ProgrammerV5