Improve this Doc View Source

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

The model must always be of type `number` otherwise Angular will throw an error. Be aware that a string containing a number is not enough. See the `numfmt` error docs for more information and an example of how to convert your model if necessary.

## Issues with HTML5 constraint validation

In browsers that follow the HTML5 specification, `input[number]` does not work as expected with `ngModelOptions.allowInvalid`. If a non-number is entered in the input, the browser will report the value as an empty string, which means the view / model values in `ngModel` and subsequently the scope value will also be an empty string.

## Directive Info

- This directive executes at priority level 0.

## Usage

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

### 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. Setting the attribute to a negative or non-numeric value, allows view values of any length.
pattern (optional) | string | Similar to `ngPattern` except that the attribute value is the actual string that contains the regular expression body that will be converted to a regular expression as in the ngPattern directive.
ngPattern (optional) | string | Sets `pattern` validation error key if the ngModel value does not match a RegExp found by evaluating the Angular expression given in the attribute value. If the expression evaluates to a RegExp object, then this is used directly. If the expression evaluates to a string, then it will be converted to a RegExp after wrapping it in `^` and `$` characters. For instance, `"abc"` will be converted to `new RegExp('^abc$')`. Note: Avoid using the `g` flag on the RegExp, as it will cause each successive search to start at the index of the last search's match, thus not taking the whole input value into account.
ngChange (optional) | string | Angular expression to be executed when input changes due to user interaction with the input element.

## Example

Edit in Plunker

    <script>
      angular.module('numberExample', [])
        .controller('ExampleController', ['$scope', function($scope) {
          $scope.example = {
            value: 12
          };
        }]);
    </script>
    <form name="myForm" ng-controller="ExampleController">
      <label>Number:
        <input type="number" name="input" ng-model="example.value"
               min="0" max="99" required>
     </label>
      <div role="alert">
        <span class="error" ng-show="myForm.input.$error.required">
          Required!</span>
        <span class="error" ng-show="myForm.input.$error.number">
          Not valid number!</span>
      </div>
      <tt>value = {{example.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('example.value'));
    var valid = element(by.binding('myForm.input.$valid'));
    var input = element(by.model('example.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');
    });