Angular FormArray+Mat Table中Rxweb唯一验证器失效问题排查

在Angular项目中，使用FormArray结合Mat Table实现响应式表单时，Validators.required验证器可正常工作，但替换为RxwebValidators.unique()验证inventoryName字段的唯一性后，Mat Table无法正常显示。观察官方及社区示例发现，RxwebValidators.unique()均在FormGroup的指定键下使用，请问此是否为强制要求？

相关代码片段 #

当前使用方式 #

this.formBuilder.control(item['inventoryName'], RxwebValidators.unique())
// 原正常工作的required验证
// this.formBuilder.control(item['inventoryName'], Validators.required)

示例中的使用方式 #

addSkill(){
    let skillsArray = <FormArray>this.employeeFormGroup.controls.skills;
    skillsArray.push(this.getSkillFormGroup());
  }
  
  getSkillFormGroup(){
    return this.formBuilder.group({
      skillName:['',RxwebValidators.unique()]
    })
  }

RxwebValidators.unique()确实强制要求在FormGroup的指定字段下使用，这是由该验证器的设计逻辑决定的：

• 该验证器需要依托FormArray的上下文，通过FormGroup的字段键来识别并收集同名字段的所有值，以此完成唯一性校验。
• 如果直接给FormControl应用该验证器，它无法获取到FormArray内其他同名字段的取值，不仅会导致校验逻辑失效，还会破坏表单的结构完整性，进而引发Mat Table渲染异常。

修正方案 #

将每个inventoryName对应的FormControl包裹到FormGroup中，确保验证器能正确识别校验上下文：

// 构建FormArray元素时的修改示例
this.inventoryFormArray.push(this.formBuilder.group({
  inventoryName: [item['inventoryName'], RxwebValidators.unique()]
  // 若有其他表单字段，可一并添加到该FormGroup内
}));

同时需要调整模板（inventory.html）的绑定逻辑：在Mat Table的行容器上添加[formGroup]="当前行的FormGroup实例"，然后将formControlName="inventoryName"绑定到对应的输入控件上，确保表单控件与FormGroup正确关联。

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