Angular 14中Select组件NgModel绑定失效问题求助

问题根源与修复步骤： #

• 移除重复的表单标识
  你的input和select组件使用了完全相同的name="GroupID"和模板变量#GroupID="ngModel"，这会导致Angular表单指令冲突，无法正确跟踪两个控件的ngModel状态。需为它们设置唯一的name和模板变量名。

• 修正ngValue绑定语法
  ngValue="{{item.GroupID}}"的写法会将GroupID的值强制转为字符串类型，若formData.GroupID是数字类型，会出现类型不匹配，导致选中状态无法同步。直接绑定变量即可，无需插值表达式。

• 统一值类型（可选）
  确保<option>的ngValue类型与formData.GroupID一致，比如如果GroupID是数字，默认选项的0也要保持数字类型；如果是字符串，就写成'0'。

修正后的代码示例： #

TypeScript代码（无需修改，保留原逻辑）：

populateForm(item: Item) {
    this.service.formData = Object.assign({}, item);
    console.log(this.service.formData);
}

HTML代码：

<div class="form-group">
  <input type="text" name="GroupIDInput" #GroupIDInput="ngModel" [(ngModel)]="itemservice.formData.GroupID">
</div>
<div class="form-group">
  <label>Group Name</label>
  <select name="GroupIDSelect" #GroupIDSelect="ngModel" [(ngModel)]="itemservice.formData.GroupID" class="form-control">
    <option [ngValue]="0">-Select-</option>
    <option *ngFor="let item of groupList" [ngValue]="item.GroupID">{{item.GroupName}}</option>
  </select>
</div>

额外提示：若groupList是异步加载的，建议在select外层添加*ngIf="groupList"，避免初始化阶段因数组为空导致的绑定异常。

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