<input type="email"> 在模式对话框中破坏 ng-model 数据绑定答案

【问题标题】：<input type="email"> breaks ng-model data binding in modal dialog<input type="email"> 在模式对话框中破坏 ng-model 数据绑定
【发布时间】：2015-01-06 08:49:29
【问题描述】：

我的应用使用带有简单输入元素的模态对话框

<input id="fieldEmail" class="form-control" type="text" ng-model="email" required="" />
email: {{ email }}

在显示模式时，我可以在输入字段中输入一些内容，并看到它在旁边的文本中回显，正如预期的那样。但是，如果我将输入类型更改为 type="email" 它会破坏数据绑定。输入不再回显。

还有其他人遇到过这个问题吗？

【问题讨论】：

标签： angularjs angular-ui-bootstrap

【解决方案1】：

只有当输入字段有有效的电子邮件时才会回显。所以将有效的电子邮件放入输入字段并检查它是否工作。这是因为当type="email" ng-model 只接受有效的电子邮件值，否则它将@ 987654323@.

【讨论】：

如果电子邮件字段为空白，我想显示“必填字段”，如果电子邮件 ID 无效，则显示“无效电子邮件 ID”。如何显示电子邮件类型的验证？

【解决方案2】：

这是因为“电子邮件”类型。即使我们使用 type='number'，'ng-model' 也将是未定义的，除非您在文本框中输入一些有效的数字。对于所有 HTML5 输入类型，我们应该提供有效输入以将值分配给 ng-model。即使我们对文本框使用正则表达式，在我们给出一个满足正则表达式的值之前，ng-model 也将是未定义的。

'http://plnkr.co/edit/G2RlzO4q1zKEPP0T8xvF?p=preview`

<body>
<h1>Hello Plunker!</h1>
Enter 3 to 12 characters only.
<br/>
<input type="text" ng-model="name" ng-pattern="/^[a-z]{3,12}$/"/>
<br/>
{{name}}

【讨论】：

如果电子邮件字段为空白，我想显示“必填字段”，如果电子邮件 ID 无效，则显示“无效电子邮件 ID”。如何显示电子邮件类型的验证？