Angular中select默认值失效及表单提交值为0的问题解决

核心问题拆解 #

• 你给selectedIndex赋值的是items[0].name（字符串），但下拉选项绑定的[value]是item.id（数字类型），类型不匹配直接导致ngModel状态混乱，提交时出现异常值0。
• Angular里用ngModel绑定后，<option>上的selected属性会被框架忽略，选中状态完全由ngModel的值决定。
• 你需求是默认选中“--Select--”，但代码里反而主动给selectedIndex设置了第一个选项的name，完全和需求反向操作。

具体修复步骤 #

1. 修正初始值，对齐需求
   要默认选中“--Select--”，需要让selectedIndex的初始值为null（对应该选项的[ngValue]="null"），删掉ngOnInit里错误的赋值代码，或者改为设置初始值为null：

   ngOnInit(){
     // 删掉错误的赋值，改为设置null作为初始值
     // this.selectIndex.setValue(this.items?.[0]?.name);
     this.selectedIndex = null; 
     // 如果是FormControl的话用：this.selectIndex.setValue(null);
   }
   

2. 统一选项值绑定类型
   注意到“--Select--”用的是[ngValue]，其他选项用的是[value]，建议统一用[ngValue]避免类型歧义：

   <ng-container *ngIf="items?.length">
     <select [ngModel]="selectedIndex" (ngModelChange)="valueChanged($event)">
       <option [ngValue]="null">--Select--</option>
       <option *ngFor="let item of items" [ngValue]="item.id">
         {{ item.name }}
       </option>
     </select>
   </ng-container>
   

3. 同步事件处理逻辑
   确保valueChanged方法处理的是item.id类型的值，避免类型转换异常：

   valueChanged(selectedId: number | null) {
     this.selectedIndex = selectedId;
     // 其他业务逻辑...
   }
   

响应式表单场景补充 #

如果selectedIndex是FormControl，初始化时直接设为null即可：

// 组件类中初始化FormControl
selectedIndex = new FormControl(null);

ngOnInit(){
  // 无需额外赋值，初始值已满足需求
}

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