Angular中FormArray与数据模型映射问题咨询

你当前代码的问题在于直接尝试访问this.data.lineItems.item——但lineItems是数组，不能直接通过.item获取单个元素。要实现数组数据和FormArray的逐一映射，需要遍历数据源数组，为每个元素创建对应的FormGroup，再把这些FormGroup集合到FormArray中。

1. 组件类代码修正 #

先定义生成单行表单组的方法，再遍历数据源生成完整的FormArray：

formGroup: FormGroup;
constructor(private builder: FormBuilder) {}

data = {
  lineItems: [
    { qty: null, item: null },
    // 可添加更多测试数据
    { qty: 2, item: "测试商品" }
  ]
};

ngOnInit(): void {
  this.formGroup = this.builder.group({
    lineItems: this.builder.array(this.generateLineItemForms())
  });
}

// 遍历数据源，为每个元素生成带绑定的FormGroup
private generateLineItemForms(): FormGroup[] {
  return this.data.lineItems.map(item => {
    return this.builder.group({
      qty: [item.qty],
      item: [item.item, Validators.required]
    });
  });
}

// 模板中快速获取FormArray的快捷方法
get lineItemsFormArray(): FormArray {
  return this.formGroup.get('lineItems') as FormArray;
}

2. 模板代码修正 #

模板需正确绑定formArrayName，通过formGroupName关联数组元素，同时绑定对应表单控件：

<div [formGroup]="formGroup">
  <div formArrayName="lineItems">
    <div *ngFor="let item of lineItemsFormArray.controls; let i = index;" [formGroupName]="i">
      <input
        type="number"
        class="form-control form-control-lg form-control-solid"
        formControlName="qty"
        placeholder="数量"
      />
      <input
        type="text"
        class="form-control form-control-lg form-control-solid"
        formControlName="item"
        placeholder="商品名称"
      />
      <!-- 验证提示示例 -->
      <div *ngIf="lineItemsFormArray.at(i).get('item')?.invalid && lineItemsFormArray.at(i).get('item')?.touched">
        商品名称为必填项
      </div>
    </div>
  </div>
</div>

核心逻辑说明 #

• generateLineItemForms通过Array.map遍历数据源，为每个lineItem生成包含对应控件的FormGroup，完成数据的逐一映射。
• 模板遍历lineItemsFormArray.controls而非原始数据源，保证表单控件与视图状态同步。
• [formGroupName]="i"绑定当前索引的FormGroup，确保输入框关联到正确的表单控件。

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