0

我有这样的形式：

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

似乎工作，但它是丑陋的）

4

2 回答 2

0

您可以通过指定,单独的错误来做到这一点，它应该发生AND您指定两个错误的类似操作。minlength && pattern

标记

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

演示 Plunkr

更新

似乎ng-message="minlength,pattern"不起作用，我建议您使用替代解决方案ng-if="!forgotForm.username.$error.minlength"

<form name="forgotForm" ng-controller="mainCtrl">
    <label>
      Enter your name:
      <div ng-messages="submittedFrgPwd && forgotForm.username.$error" multiple>
        <div ng-message="required">{{ 'EMPTY_EMAIL' }}</div>
        <div ng-message="minlength">{{ 'SHORT_EMAIL' }}</div>
        <div ng-message="maxlength">{{ 'LONG_EMAIL'}}</div>
        <div ng-if="!forgotForm.username.$error.minlength" ng-message="pattern">{{ 'INVALID_EMAIL' }}</div>
      </div>
      <input type="text" 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}"/>
</form>

更新 Plunkr

于 2015-07-27T14:09:20.187 回答
-1

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

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

此外，您可以使用 angularjs 表单默认值来检查提交，即 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>

无论如何，我在 http://run.plnkr.co/Em2eBprmn74FqSYu/下面附上了 plunker 链接

我已经包含了引导 css，我发现它在验证时很有帮助（并将 html 代码更改了一点点）。

希望这可以帮助。

于 2015-07-27T15:02:36.987 回答