ngMaxlength

- directive in module ng

ngMaxlength adds the maxlength validator to ngModel. It is most often used for text-based input controls, but can also be applied to custom text-based controls.

The validator sets the maxlength error key if the ngModel.$viewValue is longer than the integer obtained by evaluating the Angular expression given in the ngMaxlength attribute value.

Note: This directive is also added when the plain maxlength attribute is used, with two differences:

ngMaxlength does not set the maxlength attribute and therefore HTML5 constraint validation is not available.
The ngMaxlength attribute must be an expression, while the maxlength value must be interpolated.

Directive Info

This directive executes at priority level 0.

Usage

as attribute:
```
<ANY>
...
</ANY>
```

Example

<script>
  angular.module('ngMaxlengthExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.maxlength = 5;
    }]);
</script>
<div ng-controller="ExampleController">
  <form name="form">
    <label for="maxlength">Set a maxlength: </label>
    <input type="number" ng-model="maxlength" id="maxlength" />
    <br>
    <label for="input">This input is restricted by the current maxlength: </label>
    <input type="text" ng-model="model" id="input" name="input" ng-maxlength="maxlength" /><br>
    <hr>
    input valid? = <code>{{form.input.$valid}}</code><br>
    model = <code>{{model}}</code>
  </form>
</div>

var model = element(by.binding('model'));
var input = element(by.id('input'));

it('should validate the input with the default maxlength', function() {
  input.sendKeys('abcdef');
  expect(model.getText()).not.toContain('abcdef');

  input.clear().then(function() {
    input.sendKeys('abcde');
    expect(model.getText()).toContain('abcde');
  });
});

Load online demo