AngularJS Input Type Number

The AngularJS input types are HTML input element control and used togather with ng-model directive. AngularJS input type Number can be decorate with various AngularJS arguments like name, ng-required,ng-minlength,ng-maxlength,ng-pattern and ng-change.

Syntax

<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"]>

AngularJS Input Type Number Arguments

Here is a list of AngularJS Input Type Number Arguments.

Directives	Description
ng-model	AngularJS expression to bind the number.
name (optional)	Name of the control input control.
ng-minlength (optional)	AngularJS expression sets the min validation constraint to the number.
ng-maxlength (optional)	AngularJS expression sets the max validation constraint to the number.
ng-pattern (optional)	Validate input type number with given match pattern.
required (optional)	Validate input type number is required.
ng-required (optional)	AngularJS expression ng-required expression evaluates to true.
ng-change (optional)	AngularJS expression to be executed when input value changes.

AngularJS Input Type Number Example

<!DOCTYPE html>  
<html>  
<head> <!-- www.techstrikers.com -->  
<title>Number Test Sample</title>  
<script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>   
   <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>  
<script>  
  var app = angular.module('numberInputExample', [])  
     app.run(function($rootScope){  
      $rootScope.angular = angular;  
    })  
     app.controller('NumberController', ['$scope', function($scope) {  
       $scope.example = {  
         value: 432,
         minNumber: 100,
         maxNumber: 500
         }; 
       $scope.greater = function()  
         {  
              return ($scope.example.value > $scope.example.maxNumber) ? true : false;  
         };  
         $scope.lesser = function()  
         {  
              return ($scope.example.value < $scope.example.minNumber) ? true : false;  
         };
         
     }]);  
</script>  
</head>  
<body style="background-color:#DDE4E9;">  
  <fieldset style="background-color:#DDE4E9;">    
    <legend>AngulerJS Input Type Number Example</legend>    
<div ng-app="numberInputExample">  
    <form name="myForm" ng-controller="NumberController">  
       <label for="exampleInput">Enter number between  100 and 500</label>  
       <input type="number" name="input" ng-model="example.value"
            required />  
        <p style="font-family:Arial;color:red;background:steelblue;padding:3px;width:350px;"   
        ng-if='!myForm.input.$valid'>Enter Number</p>
      
      <p style="font-family:Arial;color:red;background:steelblue;padding:3px;width:350px;"   
        ng-if='greater()'>Number should be less than {{example.maxNumber}}</p>  
  
        <p style="font-family:Arial;color:red;background:steelblue;padding:3px;width:350px;"   
        ng-if='lesser()'>Number should be greater than {{example.minNumber}}</p>  
      
    </form>  
</div>  
      </fieldset>   
</body>  
</html>

Above example will produce following output