Angular嵌套动态表单问题：实现Add/Remove Serv按钮仅作用于对应行

你的核心问题是把所有Serv输入框绑定到了全局独立的FormArray，导致所有行共享同一组Serv数据，点击按钮时会影响所有行。正确的做法是让每一行的表单组自己包含专属的Serv FormArray，实现行内独立操作。

第一步：修改TypeScript代码 #

// 移除原全局keyServFA，无需再用
keyValueFA = new FormArray([this.newKeyValueFG]);

propertyFG = new FormGroup({
  keyValue: this.keyValueFA,
});

// 每行表单组内置专属的Serv FormArray
get newKeyValueFG(): FormGroup {
  return new FormGroup({
    prof: new FormControl(null),
    servs: new FormArray([this.newServFG]) // 每行默认初始化一个Serv输入框
  });
}

get newServFG(): FormGroup {
  return new FormGroup({
    serv: new FormControl(null),
  });
}

get keyValueArrayFGControls(): FormGroup[] {
  return this.keyValueFA.controls as FormGroup[];
}

// 获取指定行的Serv FormArray
getServsArray(rowIndex: number): FormArray {
  return (this.keyValueArrayFGControls[rowIndex].get('servs') as FormArray);
}

addNewKeyValueFG(): void {
  this.keyValueFA.push(this.newKeyValueFG);
}

// 给指定行新增Serv输入框
addNewServFG(rowIndex: number): void {
  this.getServsArray(rowIndex).push(this.newServFG);
}

removeNewKeyValueFG(index: number): void {
  this.keyValueFA.removeAt(index);
}

// 删除指定行的指定Serv输入框
removeNewServFG(rowIndex: number, servIndex: number): void {
  this.getServsArray(rowIndex).removeAt(servIndex);
}

第二步：修改HTML模板代码 #

<form [formGroup]="propertyFG">
  <div formArrayName="keyValue" *ngFor="let fg of keyValueArrayFGControls; let i = index">
    <div [formGroup]="fg">
      <!-- 职业选择框 -->
      <div class="col-4">
        <select formControlName="prof" width="100%" class="form-control">
          <option *ngFor="let l of professions;" [value]="l._id">
            {{getProfessionNameByLang(l.name)}}
          </option>
        </select>
      </div>

      <!-- 当前行的Serv输入框列表 -->
      <div formArrayName="servs" *ngFor="let sr of getServsArray(i).controls; let j = index" class="col-4">
        <div [formGroup]="sr">
          <input type="text" formControlName="serv" [id]="'myDiv-' + i + j" placeholder="Hizmet" />
          <button (click)="removeNewServFG(i, j)">Remove Serv</button>
        </div>
      </div>

      <!-- 行操作按钮 -->
      <button (click)="removeNewKeyValueFG(i)">Remove</button>
      <button (click)="addNewServFG(i)">Add Serv</button>
    </div>
  </div>

  <button (click)="addNewKeyValueFG()">Add</button>
</form>

核心修改说明 #

• 将原全局keyServFA迁移到每行的keyValueFG内部作为servs FormArray，实现每行数据完全隔离
• 新增getServsArray方法，快速定位指定行的Serv数组
• 调整addNewServFG和removeNewServFG方法，通过行索引参数精准操作目标行的Serv控件
• HTML模板中通过formArrayName="servs"绑定当前行的Serv数组，仅遍历当前行的Serv列表

内容的提问来源于stack exchange，提问作者Şebnem Seymen