ng-maxlengthを超えてもテキストの長さを表示する方法は？

Question

ng-maxlengthに達した文字数が表示されません。あなたがmaxlengthを超えました後、myCharの$modelValueは未定義になりますのでです

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

。以下の例のように、$viewValueプロパティを使用することはできます。

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

だけ@ジョン・スミスの答えを向上：

あなたのHTML表現に直接彼の検証を置くことができます。

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>

：次に、あなたは長さが無効であることをユーザに示すために、いくつかのCSSでそれをスタイルでした