Question

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

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

这个伎俩节省了我的一天。

angularjs：ng-message总是显示

3 个答案: