javascript - AngularJS with ngMessages: skip pattern while length is invalid -

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

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

{{ 'invalid_email' | translate }} 

and normall.

but!

when enter a@a.a both errors:

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

but real, skip pattern messages until min length valid?

i try so: data-ng-show="submittedfrgpwd && forgotform.username.$error.pattern && !forgotform.username.$error.minlength && !forgotform.username.$error.maxlength"

seems work, it's ugly)

you specifieng , separated error, and operation specifying minlength && pattern both error should occur.

markup

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

demo plunkr

update

seems ng-message="minlength,pattern" not working, i'd suggest use alternative solution using ng-if="!forgotform.username.$error.minlength"

<form name="forgotform" ng-controller="mainctrl">     <label>       enter 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