Angular中ngFor生成的多select如何提交所有选中值？

所有<select>都绑定了同一个formControlName="listItems"，每选择一个选项就会覆盖之前的值，最终只保留最后一次选择的结果。

1. 调整表单结构 #

在组件类中，为每个自定义字段（data.listCustomFields里的每一项）创建独立的FormControl，并挂载到listCustomFields这个FormGroup下，用d.fieldId作为控件的唯一标识。

示例组件代码：

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

// ...

this.yourForm = this.fb.group({
  listCustomFields: this.fb.group({
    // 遍历自定义字段，为每个fieldId创建空控件
    ...this.data.listCustomFields.reduce((controls, d) => {
      controls[d.fieldId] = new FormControl('');
      return controls;
    }, {})
  })
});

2. 修改模板代码 #

把<select>的formControlName从固定的listItems改成当前字段的fieldId，确保每个下拉框绑定到独立的表单控件：

<ng-container *ngFor="let d of data.listCustomFields;">
  <div class="g-col-12 g-col-md-2">
    <label id="{{ d.name }}" class="col-form-label">{{ d.name }}:</label>
  </div>
  <div class="g-col-12 g-col-md-4" formGroupName="listCustomFields">
    <select id="dropdown-{{ d.fieldId }}" name="{{ d.fieldId }}" class="form-select" formControlName="{{ d.fieldId }}">
      <option disabled selected value>Select</option>
      <option *ngFor="let x of d.listItems" [value]="x">{{x}}</option>
    </select>
  </div>
</ng-container>

最终效果 #

提交表单后，响应会变成类似这样的结构，包含所有选中的选项值：

{
  "listCustomFields": {
    "fieldId1": "选中值1",
    "fieldId2": "选中值2",
    "fieldId3": "选中值3"
  }
}

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