Input Type
<div class="form-group" ng-class="{ 'has-error': loginForm.password.$dirty && loginForm.password.$error.required }">
<label for="password">{{ 'PASSWORD' | translate }} <span class="required-field"> *</span></label>
<input uib-tooltip="{{ 'PLEASE_ENTER_PASSWORD' | translate }}" tooltip-placement="right" data-trigger="hover" type="password"
name="password" id="password" class="color-tooltip form-control" ng-model="password" ng-maxlength="5" required />
<span ng-show="loginForm.password.$dirty && loginForm.password.$error.required" class="help-block">{{ 'PASSWORDISREQUIRED' | translate }}</span>
<span ng-if="!loginForm.password.$valid" class="help-block">The maximum length for password is 5 characters</span>
</div>
When ng-maxlength
is being used with required
or ng-required
, it shows the error message for characters limit even when nothing is typed in input. Instead it should show the error message only when input characters exceed the length.
Change the condition to
!loginForm.password.$valid && loginForm.password.$error.maxlength
Otherwise it will show it if the field has ANY error, which it has (empty required field).
Example: