Wie wird die Textlänge angezeigt, auch wenn sie ng-maxlength überschreitet?

Question

Ich kann die Anzahl der Zeichen, die ng-maxlength erreicht haben, nicht sehen.

var app = angular.module('plunker', []); 
 
app.controller('MainCtrl', function($scope) { 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="plunker" ng-controller="MainCtrl"> 
 
    <form name="form" novalidate> 
 
    <input type="text" ng-model="myChar" ng-maxlength="5"> 
 
    <br> 
 
    <h1>Length: {{myChar.length}}</h1> 
 
    </form> 
 
</div>

Answer 1

das, weil ist, nachdem Sie maxlength überschritten haben, wird myChar ‚s $modelValue undefiniert. Sie können weiterhin die Eigenschaft $viewValue verwenden, wie im folgenden Beispiel gezeigt.

var app = angular.module('plunker', []); 
 
app.controller('MainCtrl', function($scope) { 
 
    $scope.test = function() { 
 
    console.log($scope.form.myChar.$viewValue.length); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
 
<div ng-app="plunker" ng-controller="MainCtrl"> 
 
    <form name="form" novalidate> 
 
    <input type="text" name="myChar" ng-model="myChar" ng-maxlength="5" ng-keyup="test()"> 
 
    <br> 
 
    <h1>Length: {{myChar.length}}</h1> 
 
    </form> 
 
</div>

Answer 2

Verbesserung nur die Antwort des @John Smith:

Sie seine Überprüfung auf Ihre HTML-Ausdruck direkt setzen könnte. Dann könnte man es mit einigen CSS-Style dem Benutzer zu zeigen, dass die Länge ungültig ist:

var app = angular.module('plunker', []); 
 
app.controller('MainCtrl', function($scope) { 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
 
<style> 
 
.red { 
 
color: red; 
 
} 
 
</style> 
 
<div ng-app="plunker" ng-controller="MainCtrl"> 
 
    <form name="form" novalidate> 
 
    <input type="text" name="myChar" ng-model="myChar" ng-maxlength="5"> 
 
    <br> 
 
    <h1 ng-class="{'red': form.myChar.$viewValue.length > 5}">Length: {{form.myChar.$viewValue.length}}</h1> 
 
    </form> 
 
</div>