Improve this doc View Source

HTML input element control with angular data-binding. Input control follows HTML5 input types and polyfills the HTML5 validation behavior for older browsers.

## Directive Info

- This directive executes at priority level 0.

## Usage

- as element:

      <input
        ng-model=""
        [name=""]
        [required=""]
        [ng-required=""]
        [ng-minlength=""]
        [ng-maxlength=""]
        [ng-pattern=""]
        [ng-change=""]>
      ...
      </input>

### Arguments

Param | Type | Details
--- | --- | ---
ngModel | string | Assignable angular expression to data-bind to.
name (optional) | string | Property name of the form under which the control is published.
required (optional) | string | Sets `required` validation error key if the value is not entered.
ngRequired (optional) | boolean | Sets `required` attribute if set to true
ngMinlength (optional) | number | Sets `minlength` validation error key if the value is shorter than minlength.
ngMaxlength (optional) | number | Sets `maxlength` validation error key if the value is longer than maxlength.
ngPattern (optional) | string | Sets `pattern` validation error key if the value does not match the RegExp pattern expression. Expected value is `/regexp/` for inline patterns or `regexp` for patterns defined as scope expressions.
ngChange (optional) | string | Angular expression to be executed when input changes due to user interaction with the input element.

## Example

Edit in Plunker

    <script>
      function Ctrl($scope) {
        $scope.user = {name: 'guest', last: 'visitor'};
      }
    </script>
    <div ng-controller="Ctrl">
      <form name="myForm">
        User name: <input type="text" name="userName" ng-model="user.name" required>
        <span class="error" ng-show="myForm.userName.$error.required">
          Required!</span><br>
        Last name: <input type="text" name="lastName" ng-model="user.last"
          ng-minlength="3" ng-maxlength="10">
        <span class="error" ng-show="myForm.lastName.$error.minlength">
          Too short!</span>
        <span class="error" ng-show="myForm.lastName.$error.maxlength">
          Too long!</span><br>
      </form>
      <hr>
      <tt>user = {{user}}</tt><br/>
      <tt>myForm.userName.$valid = {{myForm.userName.$valid}}</tt><br>
      <tt>myForm.userName.$error = {{myForm.userName.$error}}</tt><br>
      <tt>myForm.lastName.$valid = {{myForm.lastName.$valid}}</tt><br>
      <tt>myForm.lastName.$error = {{myForm.lastName.$error}}</tt><br>
      <tt>myForm.$valid = {{myForm.$valid}}</tt><br>
      <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br>
      <tt>myForm.$error.minlength = {{!!myForm.$error.minlength}}</tt><br>
      <tt>myForm.$error.maxlength = {{!!myForm.$error.maxlength}}</tt><br>
    </div>

    var user = element(by.binding('{{user}}'));
    var userNameValid = element(by.binding('myForm.userName.$valid'));
    var lastNameValid = element(by.binding('myForm.lastName.$valid'));
    var lastNameError = element(by.binding('myForm.lastName.$error'));
    var formValid = element(by.binding('myForm.$valid'));
    var userNameInput = element(by.model('user.name'));
    var userLastInput = element(by.model('user.last'));

    it('should initialize to model', function() {
      expect(user.getText()).toContain('{"name":"guest","last":"visitor"}');
      expect(userNameValid.getText()).toContain('true');
      expect(formValid.getText()).toContain('true');
    });

    it('should be invalid if empty when required', function() {
      userNameInput.clear();
      userNameInput.sendKeys('');

      expect(user.getText()).toContain('{"last":"visitor"}');
      expect(userNameValid.getText()).toContain('false');
      expect(formValid.getText()).toContain('false');
    });

    it('should be valid if empty when min length is set', function() {
      userLastInput.clear();
      userLastInput.sendKeys('');

      expect(user.getText()).toContain('{"name":"guest","last":""}');
      expect(lastNameValid.getText()).toContain('true');
      expect(formValid.getText()).toContain('true');
    });

    it('should be invalid if less than required min length', function() {
      userLastInput.clear();
      userLastInput.sendKeys('xx');

      expect(user.getText()).toContain('{"name":"guest"}');
      expect(lastNameValid.getText()).toContain('false');
      expect(lastNameError.getText()).toContain('minlength');
      expect(formValid.getText()).toContain('false');
    });

    it('should be invalid if longer than max length', function() {
      userLastInput.clear();
      userLastInput.sendKeys('some ridiculously long name');

      expect(user.getText()).toContain('{"name":"guest"}');
      expect(lastNameValid.getText()).toContain('false');
      expect(lastNameError.getText()).toContain('maxlength');
      expect(formValid.getText()).toContain('false');
    });