0

I have such part of form:

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

and for example:

when i enter email of normal length, but with invalid pattern i see only:

{{ 'INVALID_EMAIL' | translate }}

and this is normall.

but!

when i enter something like a@a.a i get both errors:

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

but is this real, to skip pattern messages until my min length is valid?

i try it so: data-ng-show="submittedFrgPwd && forgotForm.username.$error.pattern && !forgotForm.username.$error.minlength && !forgotForm.username.$error.maxlength"

seems to work, but it's to ugly)

brabertaser19
  • 5,678
  • 16
  • 78
  • 184

2 Answers2

0

You could do this by specifieng , separated error, Its like AND operation which you are specifying minlength && pattern both error should occur.

Markup

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

Demo Plunkr

Update

Seems like ng-message="minlength,pattern" is not working, I'd suggest you to use alternative solution by using 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>

Update Plunkr

Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
  • @brabertaser1992 I thinkyo forgot to update plunkr..please do it – Pankaj Parkar Jul 27 '15 at 14:22
  • no, all is ok in link:
    You did not enter a field
    - this didn't work     – brabertaser19 Jul 27 '15 at 14:25
  • suppose our minlength is 5 & then how can required will satisfied if length is..`ng-message="minlength, required"` is technically incorrect..it means that if `minlength` is satisfied then show required.. – Pankaj Parkar Jul 27 '15 at 14:28
  • no. logic is such: if minlength not valid - skip pattern, if valid - then pattern check as i do: `data-ng-show="submittedFrgPwd && forgotForm.username.$error.pattern && !forgotForm.username.$error.minlength && !forgotForm.username.$error.maxlength"` - but it is to ugly – brabertaser19 Jul 27 '15 at 14:33
  • @brabertaser1992 hey but `ng-message="minlength,pattern"` this should work in any case – Pankaj Parkar Jul 27 '15 at 14:38
-1

if you are seeing the handlers, it probably means there was an error somewhere. My best best is that ngMessages was not injected.

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

Additionally, you could make use of angularjs form default to check for submission i.e. forgotForm.$submitted.

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

You also do not need to use pattern for type=email unless there are some specific scenarios you want to test (e.g. email domain). ng-message='email' should be able to handle whether email is valid or not.

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

In any case, I have attached the plunker link below http://run.plnkr.co/Em2eBprmn74FqSYu/

I have included bootstrap css which i found is helpful when validating (and change the html code a lil bit).

hope this helps.

AviG
  • 161
  • 4