Angular中如何为绑定ngModel的下拉框设置默认提示选项？

嘿，这事儿好办！我来告诉你怎么给这个Angular下拉框加上默认提示选项，还让它默认选中～

你只需要做两处调整，就能轻松搞定：

1. 添加默认提示选项：在*ngFor生成的尺码选项前面，插入一个单独的<option>作为提示项；
2. 匹配双向绑定的初始值：确保组件里的tshirtsize初始值和提示项的ngValue对应上。

修改后的完整代码 #

<select name="tshirtsize" [(ngModel)]="tshirtsize" class="form-control" #tshirtRef="ngModel" required>
  <!-- 默认提示选项 -->
  <option [ngValue]="null" disabled>请选择选项</option>
  <!-- 循环生成的尺码选项 -->
  <option *ngFor="let shirt of tShirtSize" [ngValue]="shirt">
    {{shirt.name}}
  </option>
</select>

关键细节说明 #

• 给提示选项加disabled是为了防止用户手动选中它（避免提交无效的空值，当然如果不需要禁用也可以去掉）；
• 组件类里要把tshirtsize初始化为null，这样双向绑定会自动匹配提示项的ngValue，实现默认选中：

// 组件类代码示例
tshirtsize: any = null; // 初始值和提示项的ngValue保持一致
tShirtSize = [
  { name: 'S' },
  { name: 'M' },
  { name: 'L' }
  // 你的其他尺码数据
];

• 如果你的尺码对象有明确类型，还可以把tshirtsize的类型定义得更严谨：

interface ShirtSize {
  name: string;
  // 其他属性...
}

tshirtsize: ShirtSize | null = null;
tShirtSize: ShirtSize[] = [/* 你的尺码数据 */];

这样页面加载后，下拉框就会默认显示“请选择选项”，而且因为required验证的存在，用户必须选择一个有效的尺码才能通过验证哦～

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