Javascript 带ngMessages的AngularJS：长度无效时跳过模式

我有这样一部分表格：

<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}"/>

这是正常的

但是

当我输入类似

a@a.a

我收到两个错误：

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

{{'INVALID_EMAIL'| translate}
{{‘短电子邮件’|翻译}

但是，在我的最小长度有效之前跳过模式消息，这是真的吗

我试着这样做：

data ng show=“submittedFrgPwd&&forgotForm.username.$error.pattern&&forgotForm.username.$error.minlength&&forgotForm.username.$error.maxlength”

---

似乎可以工作，但很难看）

您可以通过指定

，

分离错误来完成此操作，就像指定

最小长度和模式的
和
操作一样，这两种错误都应该发生

标记

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

如果您看到处理程序，可能意味着某个地方出现了错误。我最大的优点是没有注入NGM消息

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

此外，您可以使用angularjs表单默认值来检查提交，即forgotForm.$submitted

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



您也不需要对type=email使用模式，除非有一些特定的场景需要测试（例如email域）。ng message='email'应该能够处理电子邮件是否有效

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

{{'INVALID_EMAIL'| translate}

在任何情况下，我都附加了下面的plunker链接

我已经包括了引导css，我发现它在验证时很有用（并且稍微更改了html代码）

希望这能有所帮助。
@brabertaser1992我想你忘了更新plunkr..请执行此操作否，链接中一切正常：你没有输入字段-这不起作用。我们的最小长度为5，如果长度为..
ng message=“minlength，required”
在技术上不正确。这意味着如果满足
minlength
的要求，则需要显示。否。逻辑是这样的：如果minlength无效-跳过模式，如果有效-然后像我一样检查模式：
data ng show=“submittedFrgPwd&&forgotForm.username.$error.pattern&&&forgotForm.username.$error.minlength&&forgotForm.username.$error.maxlength”
-但它是ugly@brabertaser1992嘿，但是
ng message=“minlength，pattern”
这在任何情况下都应该有效casemail@localhosthtml5是有效的，但在我的应用程序中，它不是一个有效的模式，当然所有的都是注入的。
<div class="form-group" ng-class="{ 'has-error': forgotForm.$submitted && forgotForm.username.$invalid }">

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