Angular下拉表单问题：选中值未被正确获取

嘿，我一眼就瞅出问题所在啦！你把Angular表单的[(ngModel)]和name属性放错位置了——它们应该绑定在<select>标签上，而不是每个<option>标签上。每个选项只需要指定value值就行，重复绑定ngModel会导致Angular无法正确追踪选中的状态，这就是status字段始终为空的原因。

修复后的完整代码 #

<form (submit)="save()">
  <div>
    <label for="status">User Status </label>
    <select name="status" [(ngModel)]="user.status" id="status">
      <option value="approved">Simple User</option>
      <option value="disapproved">Professional</option>
      <option value="other">Other</option>
    </select>
  </div>
  <input type="submit" value="Submit"/>
</form>

关键修改点说明 #

• 把name="status"和[(ngModel)]="user.status"从每个<option>移到了<select>标签上，让Angular能正确关联整个下拉控件和你的user.status属性。
• 移除了每个<option>上多余的type="text"（option不需要这个属性）和重复的ngModel/name绑定。
• 给<select>加上了和label的for属性对应的id="status"，提升表单的可访问性。

另外还要确保你的组件类里已经正确初始化了user对象，比如：

// 组件类中的代码
user: { status?: string } = {};

save() {
  console.log(this.user.status); // 现在应该能正确输出选中的值啦
  // 这里执行保存到数据库的逻辑
}

这样修改后，你提交表单时就能正常获取到选中的approved、disapproved或other值了！

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