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

Question

现场演示

考虑一个电子邮件输入：

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

如果其中有一种类型a@b，则client.email保留:invalidundefined，但不考虑输入。

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

这很令人困惑，因为用户认为他们输入了一个有效的电子邮件地址，但 AngularJS 中的底层模型并没有设置。

任何建议如何处理？

Answer 1

我认为您对 Bootstrap 的使用让您感到困惑。如果您自己为 ng-invalid / ng-valid 类添加样式，您将看到这是一个错误。

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