Angular表单中下拉框默认选中值异常问题求助

在Angular表单内用*ngFor循环渲染多个下拉框时，只有最后一个下拉框能正确显示预设的默认选中值，其余下拉框的选中值会被莫名重置。但移除<form>标签后，所有下拉框都能正常显示默认值。

原模板代码 #

<form #testScript="ngForm">
  <div class="channel-container">
    <div
      class="channel"
      *ngFor="
        let currentChannel of members;
        let ch_index = index
      "
    >
      <select
        class="form-select"
        [(ngModel)]="currentChannel.selectedValue"
        name="ddd"
      >
        <option
          *ngFor="let testFormat of currentChannel.options"
          [ngValue]="testFormat"
        >
          {{testFormat.val}}
        </option>
      </select>
    </div>
  </div>
</form>

原TS代码 #

export class AppComponent implements OnInit {
  title = 'test-app';
  members:any = [];
  ngOnInit(){
    
    this.members.push({options:[{id:1,val:'ok'},{id:2,val:'kk'}],selectedValue:undefined});
    this.members[0].selectedValue = this.members[0].options[1];

    this.members.push({options:[{id:1,val:'ok'},{id:2,val:'kk'}],selectedValue:undefined});
    this.members[1].selectedValue = this.members[1].options[1];
  }
}

实际效果 #

只有最后一个下拉框选中了预设的kk选项，前面的下拉框显示为空，未正确绑定默认值。移除<form>标签后，两个下拉框都能正常选中kk选项。

问题原因 #

Angular的模板驱动表单依赖name属性来区分不同表单控件的状态。当循环渲染的所有下拉框使用相同的name="ddd"时，表单无法识别每个控件的独立性，只会保留最后一个控件的绑定状态，导致前面的控件默认值被覆盖重置。

解决方案 #

利用*ngFor提供的index值，给每个下拉框生成唯一的name属性，让表单能正确区分每个控件。

修改后的模板代码 #

<form #testScript="ngForm">
  <div class="channel-container">
    <div
      class="channel"
      *ngFor="
        let currentChannel of members;
        let ch_index = index
      "
    >
      <select
        class="form-select"
        [(ngModel)]="currentChannel.selectedValue"
        name="ddd{{ch_index}}"
      >
        <option
          *ngFor="let testFormat of currentChannel.options"
          [ngValue]="testFormat"
        >
          {{testFormat.val}}
        </option>
      </select>
    </div>
  </div>
</form>

修改后，每个下拉框的name属性会变成ddd0、ddd1（对应循环的索引），表单就能正确绑定每个控件的默认值，所有下拉框都会显示预设的选中项。

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