Angular中FormArray使用问题：动态表单字段命名与分组

1. 调整TypeScript代码，动态构建表单结构 #

当前你的models FormArray里是单个FormControl，但每个产品模型需要对应一组从服务器获取的特征字段，所以每个数组元素应该是FormGroup，每个特征字段作为FormGroup内的FormControl。

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

// 初始化表单，models先设为空FormArray
createProduct = new FormGroup({
  name: new FormControl('', Validators.required),
  category: new FormControl(),
  nomenclature: new FormControl(),
  descriptions: new FormControl(),
  models: new FormArray([])
});

get models() {
  return this.createProduct.controls['models'] as FormArray;
}

// 获取特征字段后，初始化第一个模型表单
character(id = 1) {
  this.server.index('characteristic/?id=' + id).subscribe(response => {
    this.characters = response;
    // 初始化第一个模型的FormGroup
    this.addModel();
  });
}

// 添加新的模型FormGroup，包含所有特征字段
addModel() {
  const modelGroup = new FormGroup({});
  // 遍历所有特征字段，为每个字段创建FormControl
  this.characters.forEach(char => {
    modelGroup.addControl(char.id, new FormControl());
  });
  this.models.push(modelGroup);
}

2. 修正模板中的表单绑定 #

现在每个models数组元素是FormGroup，需要用[formGroup]绑定，同时正确关联每个特征字段的formControlName：

<div class="in-group mb-1" formArrayName="models">
  <!-- 遍历每个模型FormGroup -->
  <div *ngFor="let modelGroup of models.controls; let i = index" [formGroup]="modelGroup">
    <!-- 可选：添加模型标题或删除按钮 -->
    <h5>模型 {{i + 1}}</h5>
    <button type="button" (click)="removeModel(i)">删除模型</button>

    <!-- 按特征分组显示（假设特征字段有group属性） -->
    <div *ngFor="let group of getUniqueGroups(characters)">
      <h6>{{group}}</h6>
      <div *ngFor="let char of characters.filter(c => c.group === group)">
        <label for="{{char.id}}-{{i}}">{{char.name}}</label>
        <select class="form-control w-25" id="{{char.id}}-{{i}}" formControlName="{{char.id}}">
          <option *ngFor="let val of char.value" [value]="val.id">{{val.value}}</option>
        </select>
      </div>
    </div>

    <!-- 如果不需要分组，直接遍历所有特征 -->
    <!-- <div *ngFor="let char of characters">
      <label for="{{char.id}}-{{i}}">{{char.name}}</label>
      <select class="form-control w-25" id="{{char.id}}-{{i}}" formControlName="{{char.id}}">
        <option *ngFor="let val of char.value" [value]="val.id">{{val.value}}</option>
      </select>
    </div> -->
  </div>

  <!-- 添加新模型按钮 -->
  <button type="button" (click)="addModel()">添加新模型</button>
</div>

3. 补充分组相关方法（如果需要按条件分组） #

如果你的特征字段有分组标识（比如每个char包含group字段），可以添加以下方法来获取唯一分组：

getUniqueGroups(characters: any[]): string[] {
  return Array.from(new Set(characters.map(char => char.group)));
}

// 补充删除模型的方法
removeModel(index: number) {
  this.models.removeAt(index);
}

4. 表单值的结构说明 #

最终表单提交时，models数组的结构会是：

models: [
  {
    "特征ID1": "选中值ID",
    "特征ID2": "选中值ID",
    // ...其他特征字段
  },
  // 更多模型
]

这样就能动态适配从服务器获取的可变数量字段，同时支持按条件分组显示。

内容的提问来源于stack exchange，提问作者Антон Багаев