angularjs：ng-message 总是显示

Question

我正在使用 angular-messages 在我的 Angular 应用程序上显示表单验证错误。 根据文档，我构建了以下代码

<form name="loginForm">
  <label class="item item-input">
    <input type="email" placeholder="Email" ng-model="data.email" name="email" required>
  </label>
  <div ng-messages="loginForm.email.$error" style="color:maroon">
    <div ng-message="required">Please input a valid e-mail address</div>
    <div ng-message="email">You did not enter your email address correctly...</div>
  </div>
</form>

我在我的 javascript 中包含了 ngMessages 指令，并导入了 angular-messages.js 文件。

不幸的是，这两条消息一直在显示。无论我在输入字段中输入什么，它是否是有效的电子邮件。两条消息始终显示。如果我尝试只包含一个 ng-message，结果是一样的。

我做错了什么？

编辑：如果我的描述不是很清楚，这是结果的打印 https://s9.postimg.cc/du9230tdb/Screen_Shot_2015_06_26_at_17_09_24.png

Answer 1

您必须确保您实际上将 ngMessage 包含到您的模块中。

var app = angular.module('app', [
    'ngMessages'
])

...并且您将库包含到您的项目中

<script src="/scripts/vendors/angular-messages/angular-messages.js"></script>

Answer 2

您共享的代码中似乎一切正常。

<form name="loginForm">
    <label class="item item-input">
        <input type="email" placeholder="Email" ng-model="data.email" name="email" required>
    </label>
    <div ng-messages="loginForm.email.$error" style="color:maroon">
        <div ng-message="required">Please input a valid e-mail address</div>
        <div ng-message="email">You did not enter your email address correctly...</div>
    </div>
</form>

Here is a working copy on Plunker我正在使用你的代码。

来自Angularjs documentation。

默认情况下，ngMessages 一次只会显示一个错误。但是，如果您希望显示所有消息，则可以在包含 ngMessages 指令的元素上使用 ng-messages-multiple 属性标志来实现这一点。

如果您想在字段脏后显示错误，请访问此link。

确保您也包含 ngMessage 模块和库。请参阅Carlos's answer。

谢谢

Answer 3

检查

<div ng-messages="loginForm.email.$error" ng-show="loginForm.email.$invalid && loginForm.email.$touched">
...
</div>

这个技巧拯救了我的一天。