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

Last Updated : 08 Sep, 2022

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.