AngularJS - ngmaxlength不NG-需要

Question

输入类型工作

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

当ng-maxlength正在用required或ng-required使用，它显示的字符错误消息时没有输入键入甚至限制。相反，只有当输入字符长度超过时才会显示错误信息。

Answer 1

条件更改为!loginForm.password.$valid && loginForm.password.$error.maxlength

<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 && loginForm.password.$error.maxlength" class="help-block">The maximum length for password is 5 characters</span> 
</div> 

否则它会显示，如果现场有任何错误，由它（空必填字段）。

例：

var app = angular.module("my-app", []); 
 
app.controller("my-controller", ["$scope", function($scope) { 
 
    $scope.loginForm = null; 
 
    $scope.password = ""; 
 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="my-app" ng-controller="my-controller" ng-form="loginForm"> 
 
    <div class="form-group" ng-class="{ 'has-error': loginForm.password.$dirty && loginForm.password.$error.required }"> 
 
    <label for="password">Password <span class="required-field"> *</span></label> 
 
    <input 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">Password is required</span> 
 
    <span ng-if="!loginForm.password.$valid && loginForm.password.$error.maxlength" class="help-block">The maximum length for password is 5 characters</span> 
 
    </div> 
 
</div>