angularjs:ng-message总是显示

Question

我正在使用角度消息在我的角度应用程序上显示表单验证错误.根据文档,我构建了以下代码

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

这是关于Plunker的工作副本我正在使用你的代码.

来自Angularjs的文档.

默认情况下,ngMessages一次只显示一个错误.但是,如果要显示所有消息,则可以在包含ngMessages指令的元素上使用ng-messages-multiple属性标志来实现此目的.

如果您想在字段变脏后显示错误,请访问此链接.

确保您还包括ngMessage模块和库.请看卡洛斯的回答.

谢谢