How to Reset an Input Value when Limit Exceeds using AngularJS ?

Last Updated : 12 Jul, 2025

The task is to handle an input field if the number entered by the user in the input exceeds some limit using angularJS. We define a limitTo directive and use it on an HTML input element. This directive is used for all the handling of overflowing limits. The directive calls a function on the keypress event where we can check for the limits.

Example 1: This example sets the value of user input to 0 if its limit exceeds 100.

HTML

<!DOCTYPE html>
<html ng-app="myApp">

<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js">
    </script>
</head>

<body ng-controller="MyController" 
      style="text-align:center;">
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <h3>
        Edit an input value when
        it exceeds the limit
    </h3><br>
    
    <!-- Custom directive limit-to -->
    <input limit-to="100"
           type="number" 
           ng-model="val"> {{val}}
           
    <script type="text/javascript">
    angular.module('myApp', []).controller('MyController',
        ['$scope', function($scope) {
            
        // Value to ng model the input
        $scope.val;
    }]).directive("limitTo",
        ['$timeout', function($timeout) {
            
        // Declaration of custom directive
        return {
            restrict: "A",
            link: function(scope, elem, attrs) {
                var limit = parseInt(attrs.limitTo);
                elem.on("keypress", function(e) {
                    $timeout(function() {
                        if(parseInt(e.target.value) > limit) {
                            
                            // Handle change here
                            scope.val = 0;
                            scope.$apply();
                            e.preventDefault();
                        }
                    });
                });
            }
        }
    }]);
    </script>
</body>
</html>

Output: As soon as the user exceeds 100, the value is set back to 0.

Example 2: In this example, we change the text based on the input limit. If the value of the input is less than 0 then it goes to 0. If its value is greater than 100 then it goes to 100 otherwise it stays as it is.

HTML

<!DOCTYPE html>
<html ng-app="myApp">

<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js">
    </script>
</head>

<body ng-controller="MyController" 
      style="text-align: center">
    <h1 style="color: green">GeeksforGeeks</h1>
    <h3>
        Edit an input value when
        it exceeds the limit
    </h3>
    
    <!-- Custom directive limit-to -->
    <input limit-to="100" 
           type="number" 
           ng-model="val" /><br />
       {{text}}
       
    <script type="text/javascript">
    angular.module('myApp', []).controller('MyController', 
        ['$scope',function($scope) {
            
            // Value to ng model the input
            $scope.val;
            $scope.text = 'Inside Limit';
        },
    ]).directive('limitTo', 
    ['$timeout',function($timeout) {
            
            // Declaration of custom directive
            return {
                restrict: 'A',
                link: function(scope, elem, attrs) {
                    var limit = parseInt(attrs.limitTo);
                    elem.on('keypress', function(e) {
                        $timeout(function() {
                            if(parseInt(e.target.value) > limit) {
                                
                                // Handle change here if greater
                                scope.text = 'Outside limit (greater)';
                                scope.val = 100;
                                scope.$apply();
                                e.preventDefault();
                            } else if(parseInt(e.target.value) < 0) {
                                scope.text = 'Outside limit (smaller)';
                                scope.val = 0;
                                scope.$apply();
                                e.preventDefault();
                            } else {
                                scope.text = 'Inside Limit';
                                scope.$apply();
                                e.preventDefault();
                            }
                        });
                    });
                },
            };
        },
    ]);
    </script>
</body>
</html>