Question

我有这样的部分形式：

<div ng-messages="submittedFrgPwd && forgotForm.username.$error" multiple>
  <div ng-message="pattern">{{ 'INVALID_EMAIL' | translate }}</div>
  <div ng-message="required">{{ 'EMPTY_EMAIL' | translate }}</div>
  <div ng-message="minlength">{{ 'SHORT_EMAIL' | translate }}</div>
  <div ng-message="maxlength">{{ 'LONG_EMAIL' | translate }}</div>
</div>
<input type="email" id="username-remember" name="username" ng-model="username" ng-minlength="8" ng-maxlength="200" required ng-pattern="email_regexp" ng-class="{ 'has-error': submittedFrgPwd && forgotForm.username.$invalid || submittedError}"/>

，例如：

当我输入正常长度的电子邮件时，但是无效模式我只看到：

{{ 'INVALID_EMAIL' | translate }}

这是正常的。

但！

当我输入类似a@a.a的内容时，我会收到两个错误：

<div ng-message="pattern">{{ 'INVALID_EMAIL' | translate }}</div>
<div ng-message="minlength">{{ 'SHORT_EMAIL' | translate }}</div>

但这是否真实，跳过模式消息，直到我的最小长度有效？

我试试这样： data-ng-show="submittedFrgPwd && forgotForm.username.$error.pattern && !forgotForm.username.$error.minlength && !forgotForm.username.$error.maxlength"

似乎有用，但这很难看）

Answer 1

您可以通过指定,分隔的错误执行此操作，它与您指定AND的{{1}}操作一样，都应该发生错误。

<强>标记

minlength && pattern

Demo Plunkr

<强>更新

似乎<div ng-message="minlength,pattern">{{ 'INVALID_EMAIL' | translate }}</div>无效，我建议您使用ng-message="minlength,pattern"

建议使用替代解决方案

ng-if="!forgotForm.username.$error.minlength"

Update Plunkr

Answer 2

如果您看到处理程序，则可能意味着某处出现错误。我最好的是没有注射ngMessages。

angular.module('app',['ngTranslate', 'ngMessages'])

此外，您可以使用angularjs form default来检查提交，即forgotForm。$ submitted。

<div class="form-group" ng-class="{ 'has-error': forgotForm.$submitted && forgotForm.username.$invalid }">

除非您要测试某些特定方案（例如电子邮件域），否则您也不需要使用type = email。 ng-message ='email'应该能够处理电子邮件是否有效。

<div ng-message="email">{{ 'INVALID_EMAIL' | translate }}</div>

在任何情况下，我都附上了下面的plunker链接 http://run.plnkr.co/Em2eBprmn74FqSYu/

我已经包含了bootstrap css，我发现它在验证时很有用（并且将html代码更改为lil）。

希望这会有所帮助。

AngularJS with ngMessages：跳过模式，长度无效

2 个答案: