angularjs: ng-message 总是显示

Question

我正在使用 angular-消息在我的 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

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

<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.

By default, ngMessages will only display one error at a time. However, if you wish to display all messages then the ng-messages-multiple attribute flag can be used on the element containing the ngMessages directive to make this happen.

如果你想在字段变脏后显示错误，请访问这个link。

确保您也包括了 ngMessage 模块和库。请参阅。

谢谢

Answer 2

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

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

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

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

Answer 3

检查

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

这个技巧救了我一命。

angularjs: ng-message 总是显示

angularjs: ng-message always showing

angularjs

ng-messages