Angular响应式表单中如何用同名formControlName生成指定POST结构？

核心问题分析 #

你当前的代码存在表单控件命名冲突：同一个formGroupName下使用了两个formControlName="value"，Angular响应式表单要求单个FormGroup内的控件名必须唯一，这会导致只有最后一个控件的值能被正确绑定，无法生成目标POST结构。

解决方案步骤 #

1. 调整表单构建逻辑

每个分类/子分类对应documentFields数组中的一个独立FormGroup，每个FormGroup包含静态name和可编辑value。修改表单组创建方法，支持传入静态name值：

// 生成单个documentField的FormGroup，接收静态name参数
newDocumentField(staticName: string) {
  return this.fb.group({
    name: staticName, // 固定为"Category"或"Sub-Category"
    value: '' // 存储选择的分类/子分类值
  });
}

// 初始化文档表单时，往documentFields数组中添加两个字段条目
addDocument() {
  const docGroup = this.fb.group({
    name: '1.pdf', // 示例文件名，实际可从上传组件获取
    documentId: 34, // 示例ID，实际可从API返回获取
    documentFields: this.fb.array([
      this.newDocumentField('Category'),   // 第一个条目：分类
      this.newDocumentField('Sub-Category')// 第二个条目：子分类
    ])
  });
  // 将文档组添加到documents表单数组（假设documents是FormArray类型）
  this.documents.push(docGroup);
}

2. 重构模板渲染逻辑

不再在同一个formGroupName下放置两个选择框，而是将每个选择框绑定到documentFields数组中对应的独立FormGroup：

<ng-container formArrayName="documents">
  <ng-container *ngFor="let doc of documents.controls; let docIndex = index">
    <ng-container [formGroupName]="docIndex">
      <div class="row mb-3">
        <!-- 分类选择框：绑定documentFields数组的第一个元素 -->
        <label class="col-sm-1 col-form-label">Category:</label>
        <div class="col-md-2">
          <ng-container formArrayName="documentFields">
            <ng-container [formGroupName]="0">
              <select class="form-select" formControlName="value">
                <option selected>Select</option>
                <option *ngFor="let c of taxonomyResponse.categoryList">{{c.name}}</option>
              </select>
            </ng-container>
          </ng-container>
        </div>

        <!-- 子分类选择框：绑定documentFields数组的第二个元素 -->
        <label class="col-auto col-form-label">Sub-Category:</label>
        <div class="col-md-2">
          <ng-container formArrayName="documentFields">
            <ng-container [formGroupName]="1">
              <select class="form-select" formControlName="value">
                <option selected>Select</option>
                <!-- 可根据分类选择结果动态加载子分类选项 -->
              </select>
            </ng-container>
          </ng-container>
        </div>
      </div>
    </ng-container>
  </ng-container>
</ng-container>

3. 可选：分类与子分类联动（按需实现）

如果需要根据选中的分类动态加载子分类，可监听分类控件的变化：

// 在组件初始化或添加文档后监听分类值变化
setupCategoryListener(docIndex: number) {
  const categoryControl = (this.documents.at(docIndex).get('documentFields') as FormArray)
    .at(0).get('value');
  
  categoryControl?.valueChanges.subscribe(selectedCategory => {
    // 调用服务获取对应子分类列表
    // this.subCategoryList = await this.taxonomyService.getSubCategories(selectedCategory);
  });
}

最终效果 #

提交表单时，表单值会自动生成符合要求的POST结构：

"documents": [
  {
    "name": "1.pdf",
    "documentId": 34,
    "documentFields": [
      {
        "name": "Category",
        "value": "选中的分类名称"
      },
      {
        "name": "Sub-Category",
        "value": "选中的子分类名称"
      }
    ]
  }
]

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