Text input with number validation and transformation. Sets the number
validation
error if not a valid number.
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.
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.
<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"]>
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 |
max
(optional)
|
string |
Sets the |
required
(optional)
|
string |
Sets |
ngRequired
(optional)
|
string |
Adds |
ngMinlength
(optional)
|
number |
Sets |
ngMaxlength
(optional)
|
number |
Sets |
pattern
(optional)
|
string |
Similar to |
ngPattern
(optional)
|
string |
Sets |
ngChange
(optional)
|
string |
Angular expression to be executed when input changes due to user interaction with the input element. |
<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>