Overview

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 AngularJS 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
  ng-maxlength="expression">
...
</ANY>

Arguments

Param	Type	Details
ngMaxlength	expression	AngularJS expression that must evaluate to a `Number` or `String` parsable into a `Number`. Used as value for the `maxlength` validator.

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');
  });
});