Angular Reactive Form动态表单提交时如何将含数组的表单数据作为对象提交

核心实现逻辑是所有表单项（包括数组类型）都统一挂载到根FormGroup实例下，提交时直接读取根表单的value属性即可得到包含数组的完整结构化提交对象，具体实现步骤如下：

1. 组件内表单逻辑实现 #

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormArray, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  // 根表单实例
  dynamicForm: FormGroup;

  ngOnInit() {
    // 初始化根表单，包含普通字段和数组类型字段
    this.dynamicForm = new FormGroup({
      // 普通字段示例
      title: new FormControl('', Validators.required),
      description: new FormControl(''),
      // 数组类型字段用FormArray承载
      itemList: new FormArray([])
    });
  }

  // 封装FormArray快捷访问方法
  get itemListArray(): FormArray {
    return this.dynamicForm.get('itemList') as FormArray;
  }

  // 新增数组子项方法
  addItem() {
    const item = new FormGroup({
      itemName: new FormControl('', Validators.required),
      itemCount: new FormControl(1, [Validators.min(1), Validators.required])
    });
    this.itemListArray.push(item);
  }

  // 删除指定下标数组子项方法
  removeItem(index: number) {
    this.itemListArray.removeAt(index);
  }

  // 表单提交方法
  onSubmit() {
    if (this.dynamicForm.invalid) return;
    // 直接取根表单value即为包含数组的完整提交对象
    const submitPayload = this.dynamicForm.value;
    // 此处直接将submitPayload传给后端接口即可
    console.log('完整提交数据：', submitPayload);
  }
}

2. 模板绑定实现 #

<form [formGroup]="dynamicForm" (ngSubmit)="onSubmit()">
  <!-- 普通字段绑定 -->
  <div class="form-item">
    <label>表单标题</label>
    <input type="text" formControlName="title" placeholder="请输入标题">
  </div>
  <div class="form-item">
    <label>表单描述</label>
    <textarea formControlName="description" placeholder="请输入描述"></textarea>
  </div>

  <!-- 数组类型字段绑定 -->
  <div formArrayName="itemList">
    <h3>子项列表</h3>
    <button type="button" (click)="addItem()">新增子项</button>
    <div 
      *ngFor="let item of itemListArray.controls; let i = index" 
      [formGroupName]="i"
      class="array-item"
    >
      <label>子项名称</label>
      <input type="text" formControlName="itemName" placeholder="请输入子项名称">
      <label>子项数量</label>
      <input type="number" formControlName="itemCount" min="1">
      <button type="button" (click)="removeItem(i)">删除子项</button>
    </div>
  </div>

  <button type="submit" [disabled]="dynamicForm.invalid">提交表单</button>
</form>

注意事项 #

• 所有动态生成的数组子项必须全部挂载到根FormGroup下的FormArray实例中，不要单独维护独立数组变量，避免数据不同步
• 模板中嵌套结构必须正确绑定对应属性：FormArray绑定formArrayName，数组下的每个FormGroup子项绑定对应下标的formGroupName
• 如果是完全动态生成的表单，可以提前遍历字段配置，递归生成对应的FormControl/FormGroup/FormArray实例，全部挂载到根FormGroup下即可实现任意结构的动态表单提交

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