为啥 ngModel 在选择中添加空白/空选项？

Posted 2023-03-13

【中文标题】为啥 ngModel 在选择中添加空白/空选项？

【英文标题】：Why ngModel adds a blank/empty option to a select?为什么 ngModel 在选择中添加空白/空选项？

【发布时间】：2017-01-19 16:26:40

【问题描述】：

我使用name 属性和ngModel 指令作为在Angular 2 应用程序中获取表单值的简单方法：

<input type="text" name="firstName" ngModel>

但是我在select 中使用这种方法时遇到了问题：

<select name="gender" ngModel>

带有ngModel 的选择呈现空白/空选项。

没有ngModel：

ngModel:

这是一个笨蛋：http://plnkr.co/edit/hwF2U7WHp1U8IQnVGEXv?p=preview

是我遗漏了什么还是这是一个错误？

【问题讨论】：

这不是添加的空选项，只是默认值不匹配任何选项。无论如何，您添加ngModel 是为了什么？

使用 NgModel，它是空的，因为它绑定到您的模型值。如果您希望默认选择任何性别，请将性别值设置为您的模型。例如。 [(ngModel)]="Model.value" 双向绑定。

Why does angularjs include an empty option in select的可能重复

【参考方案1】：

如果你使用

<select name="gender" [(ngModel)]="gender">

与

gender: string = 'male';

你会得到想要的结果。如果你以这种方式使用ngModel，你也不应该需要getFormData 方法。

Plunker example