如何使用Twitter Bootstrap样式处理AngularJS中的电子邮件输入验证?

时间:2013-07-02 00:32:26

标签: twitter-bootstrap angularjs input

Live Demo

考虑一下电子邮件输入:

<input type="email" ng-model="client.email">

如果其中有a@bclient.emailundefined会保留{{1}},但输入不会被视为:invalid

如果使用Bootstrap来设置输入样式,则会导致输入具有正常的蓝色轮廓,而不是红色轮廓,这表示输入具有有效的电子邮件。

这很令人困惑,因为用户认为他们输入了有效的电子邮件地址,但未设置AngularJS中的基础模型。

任何建议如何处理?

1 个答案:

答案 0 :(得分:0)

我认为你使用Bootstrap让你感到困惑。如果你自己为ng-invalid / ng-valid类添加样式,你会发现它是一个错误。

例如,http://docs.angularjs.org/guide/forms的第二个示例演示了如何为无效/有效类型添加自定义类,并显示@ b确实是无效值。