Improve this Doc View Source

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:

1. `ngMaxlength` does not set the `maxlength` attribute and therefore HTML5 constraint validation is not available.
2. 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 element:

      <ng-maxlength>
      ...
      </ng-maxlength>

- as attribute:

      <ANY>
      ...
      </ANY>

## Examples

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