Improve this doc View Source

Text input with number validation and transformation. Sets the `number` validation error if not a valid number.

## Directive Info

- This directive executes at priority level 0.

## Usage

    <input type="number"
           ng-model=""
           [name=""]
           [min=""]
           [max=""]
           [required=""]
           [ng-required=""]
           [ng-minlength=""]
           [ng-maxlength=""]
           [ng-pattern=""]
           [ng-change=""]>

### 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.
min (optional) | string | Sets the `min` validation error key if the value entered is less than `min`.
max (optional) | string | Sets the `max` validation error key if the value entered is greater than `max`.
required (optional) | string | Sets `required` validation error key if the value is not entered.
ngRequired (optional) | string | Adds `required` attribute and `required` validation constraint to the element when the ngRequired expression evaluates to true. Use `ngRequired` instead of `required` when you want to data-bind to the `required` attribute.
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.value = 12;
      }
    </script>
    <form name="myForm" ng-controller="Ctrl">
      Number: <input type="number" name="input" ng-model="value"
                     min="0" max="99" required>
      <span class="error" ng-show="myForm.input.$error.required">
        Required!</span>
      <span class="error" ng-show="myForm.input.$error.number">
        Not valid number!</span>
      <tt>value = {{value}}</tt><br/>
      <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
      <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
      <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
      <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
     </form>

    var value = element(by.binding('value'));
    var valid = element(by.binding('myForm.input.$valid'));
    var input = element(by.model('value'));

    it('should initialize to model', function() {
      expect(value.getText()).toContain('12');
      expect(valid.getText()).toContain('true');
    });

    it('should be invalid if empty', function() {
      input.clear();
      input.sendKeys('');
      expect(value.getText()).toEqual('value =');
      expect(valid.getText()).toContain('false');
    });

    it('should be invalid if over max', function() {
      input.clear();
      input.sendKeys('123');
      expect(value.getText()).toEqual('value =');
      expect(valid.getText()).toContain('false');
    });