Angular Reactive Form：含对象的FormArray如何预设回显值？

当前代码存在3个典型的Angular响应式表单绑定逻辑错误，直接导致值回显失败、新建流程被破坏：

• 错误替换FormArray实例：productForm初始化时绑定的是最初声明的this.personas引用，在onEdit方法里直接把this.personas赋值为全新的FormArray实例后，productForm内部存储的还是旧的FormArray引用，两者完全脱钩，表单根本感知不到后续添加的控件，patchValue()自然不会生效；同时新建流程往旧引用里push控件时，表单也收不到数据，直接导致新建功能异常。
• 表单控件与UI未关联：模板里循环生成的select下拉框，没有通过formControlName和FormArray对应索引的控件绑定，下拉框的选中状态和表单控件完全独立，哪怕控件值正确，UI也不会同步选中。
• 值匹配规则不兼容：Angular的select默认按对象引用匹配选中项，手动构造的FormControl值和option标签上ngValue绑定的选项对象哪怕字段完全一致，因为不是同一个内存实例，也无法触发选中。

1. 调整TypeScript逻辑 #

不要替换FormArray实例，改为清空原有内容后逐个添加控件，同时优先匹配全量选项里的原对象赋值，补充自定义比对规则规避引用不一致问题：

// 新增自定义比对方法，按id匹配persona，解决引用不一致导致的选中失败
public comparePersona(p1: Persona, p2: Persona): boolean {
  return p1?.id === p2?.id;
}

public onEdit(product: Product): void {
  if (product.personas.length > 0) {
    this.personaService.personas$.pipe(takeUntil(this._destroyed$)).subscribe((personas: Persona[]) => {
      // 清空原有FormArray内容，不替换实例，保持和productForm的绑定引用一致
      this.personas.clear();
      // 从全量personas列表里匹配当前产品对应的persona原对象
      const matchedPersonas = product.personas
        .map(p => personas.find(fullP => fullP.id === p.id))
        .filter(Boolean);
      // 逐个推入FormArray，值直接用匹配到的原选项对象
      matchedPersonas.forEach(persona => {
        this.personas.push(new FormControl(persona));
      });
    });
  }
}

2. 调整模板绑定 #

给select补上索引绑定的formControlName，挂上自定义比对规则：

<div class="form-group">
  <label for="personas">Personas</label>
  <div id="personas" formArrayName="personas">
    <div *ngFor="let persona of personas.controls; let i = index;" class="d-flex m-1">
      <select
        *ngIf="!(personaService.isFetchingPersonas$ |async) && (personaService.personas$ |async) as options"
        class="form-control"
        [formControlName]="i"
        [compareWith]="comparePersona">
        <option *ngFor="let option of options" [ngValue]="option">{{ option.persona }}</option>
      </select>
    </div>
  </div>
</div>

• FormArray引用始终和productForm保持绑定，编辑时预填值能正确同步到表单，新建流程往同一实例加控件时不会再脱钩
• select和表单控件双向绑定后，值变化能双向同步
• 按id比对的规则下，哪怕对象引用不同，只要id一致就能正确选中对应option，不会停留在占位项

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