如何向Angular动态表单数组传递动态值并解决值重复问题

核心问题根源 #

你遇到的值重复问题有两个核心诱因：

• Angular的**模板驱动表单（ngModel）和响应式表单（formControlName/FormArray）**不能混用在同一个输入控件上，两套体系的状态同步逻辑会出现冲突
• 你当前所有动态生成的表单项都绑定了同一个全局变量people3，新增表单组时所有控件共享同一份值，自然会出现同步重复的问题
• 额外问题：你没有为FormArray的每个子表单组绑定独立的formGroupName，所有formControlName="measurement"都指向了外层FormGroup的同一个控件，也是值重复的核心原因

正确实现方案 #

完全使用响应式表单管理动态表单状态，移除所有ngModel绑定，按以下步骤调整代码：

1. 调整TS侧表单定义 #

import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';

export class YourComponent {
  employeeForm: FormGroup;

  constructor(private fb: FormBuilder) {
    // 初始化外层表单，嵌套FormArray存储多组表单项
    this.employeeForm = this.fb.group({
      measurementList: this.fb.array([])
    })
  }

  // 快捷获取FormArray实例
  get measurementList(): FormArray {
    return this.employeeForm.get('measurementList') as FormArray;
  }

  // 新增表单组方法
  addMeasurementGroup(initValue?: string) {
    // 每个新增的表单组都是独立实例，不会互相影响
    const newFormGroup = this.fb.group({
      measurement: [initValue || '', Validators.required]
    })
    this.measurementList.push(newFormGroup);
  }

  // 给指定索引的表单组赋值
  setMeasurementValue(index: number, value: string) {
    this.measurementList.at(index).get('measurement').setValue(value);
  }

  // 获取所有表单组的值
  getAllValues() {
    return this.employeeForm.value.measurementList;
  }
}

2. 调整模板侧绑定逻辑 #

<form [formGroup]="employeeForm">
  <!-- 绑定FormArray，循环渲染每一组表单项 -->
  <ng-container formArrayName="measurementList">
    <div *ngFor="let formGroup of measurementList.controls; let i = index" [formGroupName]="i">
      <div class="flex flex-col gt-xs:flex-row">
        <mat-form-field class="w-full">
          <input
            id="measurement-{{i}}"
            placeholder="Measurement"
            matInput
            readonly
            formControlName="measurement"
          >
          <mat-icon
            class="icon-size-5"
            matPrefix
            svgIcon="heroicons_outline:tag"
          ></mat-icon>
          <mat-error *ngIf="formGroup.get('measurement').hasError('required')">
            Measurement为必填项
          </mat-error>
        </mat-form-field>
      </div>
    </div>
  </ng-container>

  <button type="button" mat-raised-button (click)="addMeasurementGroup()">新增测量项</button>
</form>

动态值传递说明 #

如果需要给不同的表单组传递不同的初始值，直接调用addMeasurementGroup时传入初始值即可，也可以通过setMeasurementValue方法随时给指定索引的表单组赋值，每个表单控件都是独立实例，不会出现跨组值重复的问题。

内容的提问来源于stack exchange，提问作者Tee's Touch