Как показать длину текста, даже если она превышает ng-maxlength?

Question

Как показать длину текста, даже если она превышает ng-maxlength?

0

Я не могу видеть количество ng-maxlength достигшее ng-maxlength.

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>

Muhammed 15 май 2016, в 16:32

Источник

Теги:

javascript

angularjs

validation

maxlength

ng-maxlength

2 ответа

Ещё вопросы

John Smith · Answer 1 · 2016-05-15T13-01-00.000Z

Это потому, что после превышения maxlength myChar $modelValue будет неопределенным. Вы все равно можете использовать свойство $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>

Diego Polido Santana · Answer 2 · 2016-05-15T12-38-00.000Z

Просто улучшая ответ @John Smith:

Вы можете проверить его непосредственно на своем HTML-выражении. Затем вы можете создать его с помощью CSS, чтобы показать пользователю, что длина недействительна:

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>