如何使用PatchValue编辑Angular嵌套表单数组？字段无法更新

我通过API填充下拉选择框，选中选项时，OnChange方法会调用另一服务获取数据并展示在UI上，数据显示正常，但修改内容时字段无法更新。目前我用forEach循环结合push方法添加表单组：

const infoTemp = this.tempInfo?.customFields?.textCustomFields;
infoTemp.forEach((res) => {
  this.customNameFormArr.push(
    this.fb.group({
      name: [res.name],
      value: [res.value],
    })
  );
});

我知道需要用patchValue实现字段编辑，但尝试以下代码未生效，求解决思路：

this.envelopeRequest.controls.newRequest.patchValue({
  customFields: {
    textFields: [
      {
        name: res.name,
        value: res.value
      }
    ]
  }
})

解决思路 #

• 匹配表单结构
  确认patchValue的对象结构和表单实际结构完全一致。如果customFields.textFields是FormArray类型，直接传入普通数组对象不会生效，需要针对每个FormGroup单独处理。
• 清空旧表单组再更新
  下拉选项变化时，先清空customNameFormArr再重新构建，避免旧控件残留导致绑定失效：

  this.customNameFormArr.clear();
  const infoTemp = this.tempInfo?.customFields?.textCustomFields;
  infoTemp.forEach((res) => {
    this.customNameFormArr.push(this.fb.group({ name: [res.name], value: [res.value] }));
  });
  

• 直接操作FormArray控件更新
  针对已有表单组，遍历FormArray的控件逐个patch数据：

  const infoTemp = this.tempInfo?.customFields?.textCustomFields;
  infoTemp.forEach((res, index) => {
    if (this.customNameFormArr.at(index)) {
      this.customNameFormArr.at(index).patchValue({ name: res.name, value: res.value });
    }
  });
  

• 检查模板绑定
  确保模板中用formArrayName和formGroupName正确绑定到表单数组，示例：

  <div formArrayName="customNameFormArr">
    <div *ngFor="let group of customNameFormArr.controls; let i=index" [formGroupName]="i">
      <input formControlName="name">
      <input formControlName="value">
    </div>
  </div>
  

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