Angular：如何将动态标签页表单字段保存至嵌套FormGroup

核心思路 #

放弃FormArray，改用嵌套FormGroup结构，直接以标签名（如M1、M2）作为外层FormGroup的键，每个标签对应的表单字段作为内层FormGroup的控件，完美匹配你需要的Tab={'M1':{...},'M2':{...}}格式。

步骤1：组件内初始化嵌套表单结构 #

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  // 标签列表，初始包含M1
  tabs = ['M1'];
  // 主表单组，嵌套各标签的子表单
  tabForm: FormGroup;

  ngOnInit() {
    // 初始化主表单，添加第一个标签M1的子表单
    this.tabForm = new FormGroup({
      'M1': new FormGroup({
        nameid: new FormControl('', Validators.required),
        height: new FormControl('', Validators.required),
        weight: new FormControl('', Validators.required)
        // 其他需要的字段按此格式添加
      })
    });
  }
}

步骤2：新增标签时动态绑定子表单 #

添加新增标签的方法，每次生成新标签名后，同步给主表单添加对应的子FormGroup：

addTab() {
  const newTabIndex = this.tabs.length + 1;
  const newTabName = `M${newTabIndex}`;
  this.tabs.push(newTabName);
  
  // 给主表单动态添加新的子表单组
  this.tabForm.addControl(newTabName, new FormGroup({
    nameid: new FormControl('', Validators.required),
    height: new FormControl('', Validators.required),
    weight: new FormControl('', Validators.required)
  }));
}

步骤3：HTML模板绑定调整 #

每个标签页的表单要绑定到对应的子FormGroup：

<mat-tab-group>
  <mat-tab *ngFor="let tabName of tabs" [label]="tabName">
    <!-- 绑定当前标签对应的子表单组 -->
    <form [formGroup]="tabForm.get(tabName)">
      <input formControlName="nameid" placeholder="Name ID" required>
      <input formControlName="height" placeholder="Height" type="number" required>
      <input formControlName="weight" placeholder="Weight" type="number" required>
      <!-- 其他字段按此格式绑定 -->
    </form>
  </mat-tab>
</mat-tab-group>

<button (click)="addTab()">新增标签页</button>
<button (click)="saveTabData()">保存所有数据</button>

步骤4：保存数据（直接获取嵌套格式） #

调用表单的value属性即可得到你需要的嵌套分组结构：

saveTabData() {
  const savedTabData = this.tabForm.value;
  // savedTabData格式就是：{M1: {nameid: 'xxx', height: '177', ...}, M2: {...}}
  console.log(savedTabData);
  // 此处可将数据发送到后端存储
}

关键说明 #

为什么不用FormArray？因为FormArray返回的是数组结构[{...}, {...}]，无法直接以标签名作为键名，而嵌套FormGroup天生就是键值对结构，完全匹配你的需求，实现起来更简洁。

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