Angular FormArray新增行选值时首行同步被赋值问题求助

问题场景 #

开发Angular的FormArray动态新增行功能时出现异常，新增第二行并选值后，第一行会被同步赋予相同的值，卡顿许久未定位到根因。

复现步骤 #

• 初始界面包含模态框触发入口与文本框
  
• 点击入口唤起选值模态框
  
• 点击模态框表格内的值，为第一行完成赋值
  
• 执行新增行操作，生成第二行表单
  
• 为第二行选择对应值
  

异常表现 #

第二行选值完成后，第一行的值被同步覆盖为和第二行完全一致的内容，出现不同行表单值串扰。

根因说明 #

这是Angular FormArray动态行的典型错误，核心原因分两类，90%以上的场景属于第一类：

1. 新增行时复用了已有控件的对象引用：新增行逻辑没有创建全新的FormGroup/FormControl实例，而是直接把第一行的FormGroup对象引用push进了FormArray，导致多行绑定的是同一个控件对象，任意一行修改值都会同步到所有共用引用的行。
   典型错误代码：

   // 错误：直接复用第一行的FormGroup引用，没有创建新实例
   addRow() {
     const existRow = this.formArray.at(0) as FormGroup;
     this.formArray.push(existRow);
   }
   

2. 选值回填逻辑绑定了固定索引：模态框选值后的回填逻辑没有记录当前操作的行索引，始终把值赋值给固定索引（比如索引0的第一行）的控件，导致选第二行的值时错误修改了第一行的数据。

修复方案 #

1. 抽离独立的新建行方法，每次新增行都返回全新初始化的FormGroup实例，绝对禁止复用已有控件的引用：

   // 新建独立工厂方法，每次调用生成全新的行控件实例
   initRowForm(): FormGroup {
     return this.formBuilder.group({
       // 所有字段逐一初始化，不要引用已有控件
       selectValue: [null],
       // 其余行字段按业务需求初始化
     })
   }
   
   addRow() {
     // 新增时调用工厂方法拿新实例，推入FormArray
     this.formArray.push(this.initRowForm());
   }
   

2. 模态框唤起时，记录当前触发选值的行索引，选值完成后通过该索引找到对应行的控件赋值，不要硬编码固定索引。
3. 模板层循环渲染FormArray行时，确保每个行的formGroupName正确绑定循环项的索引，内部的formControlName正确挂载在当前行的FormGroup上下文下，不要跨上下文绑定控件。

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