如何在Angular Form Group中利用对象数组实现动态表单绑定

需求概述 #

基于给定的values数组，实现按group（basics/others）分组展示的动态表单，每个字段的comment值对应绑定到对应标签旁的输入框，支持提交保存。

实现步骤 #

1. 组件类：数据分组与表单初始化

在组件中对原始数据进行分组处理，同时创建响应式表单，为每个字段的comment生成独立表单控件：

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

@Component({
  selector: 'app-dynamic-form',
  templateUrl: './dynamic-form.component.html',
  styleUrls: ['./dynamic-form.component.css']
})
export class DynamicFormComponent implements OnInit {
  values = [
    { id: 14, group: 'basics', field: 'food', comment: 'Fine' },
    { id: 15, group: 'basics', field: 'water', comment: 'Good' },
    { id: 19, group: 'others', field: 'recreation', comment: '' },
    { id: 16, group: 'basics', field: 'shelter', comment: '' },
    { id: 17, group: 'others', field: 'job', comment: 'Not Good' },
    { id: 18, group: 'others', field: 'education', comment: 'Fine' },
  ];

  groupedValues: { [key: string]: typeof this.values };
  form: FormGroup;

  // 字段名与显示标签的映射表
  fieldLabels = {
    food: 'Food Quality',
    water: 'Water Availability',
    shelter: 'Shelter',
    job: 'Jobs Value',
    education: 'Educations Provided',
    recreation: 'Recreational value'
  };

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    // 按group字段分组原始数据
    this.groupedValues = this.values.reduce((acc, item) => {
      if (!acc[item.group]) {
        acc[item.group] = [];
      }
      acc[item.group].push(item);
      return acc;
    }, {} as { [key: string]: typeof this.values });

    // 初始化表单，为每个字段的comment创建独立控件
    const formControls: { [key: string]: FormControl } = {};
    this.values.forEach(item => {
      formControls[`comment_${item.field}`] = new FormControl(item.comment);
    });
    this.form = this.fb.group(formControls);
  }

  onSubmit(): void {
    if (this.form.valid) {
      // 将表单值映射回原始数据结构
      const updatedValues = this.values.map(item => ({
        ...item,
        comment: this.form.get(`comment_${item.field}`)?.value
      }));
      console.log('提交数据:', updatedValues);
      // 此处添加实际的接口提交或数据保存逻辑
    }
  }
}

2. 模板：动态生成分组表单

替换静态HTML为动态遍历分组的模板，自动渲染分组标题、字段标签与绑定输入框：

<form [formGroup]="form" (submit)="onSubmit()">
  <!-- 遍历所有分组 -->
  <div *ngFor="let groupKey of Object.keys(groupedValues)">
    <!-- 分组标题转换 -->
    <h5>{{ groupKey === 'basics' ? 'Basic Necessary' : 'Other Necessary' }}</h5>
    
    <div class="row">
      <!-- 遍历当前分组下的所有字段 -->
      <div class="col-md-2" *ngFor="let item of groupedValues[groupKey]">
        <label class="custom-control-label">
          {{ fieldLabels[item.field] }}&nbsp;
        </label>
        <!-- 绑定对应字段的表单控件 -->
        <input type="text" formControlName="comment_{{ item.field }}" />
      </div>
    </div>
    <br>
  </div>

  <button class="btn btn-primary btn-lg min-w100 float-right mt-3">
    Save
  </button>
</form>

关键说明 #

• 数据分组：通过reduce方法将原始数组按group字段归类，让模板可以按组批量渲染表单元素。
• 控件命名规则：用comment_${field}作为表单控件名，避免不同字段的comment控件重名冲突。
• 标签映射：通过fieldLabels对象统一管理字段名和显示标签的对应关系，提升模板可维护性。
• 提交逻辑：提交时将表单值映射回原始数据结构，方便后续的业务处理或接口提交。

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