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

02 Mar, 2020
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 to 100.
<!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">    <center>        <h1 style="color: green;">            GeeksforGeeks        </h1>        <b>            Edit an input value when            it exceeds the limit        </b>        <br><br>          <!-- Custom directive limit-to -->        <input limit-to="100"            type="number"            ng-model="val">         {{val}}    </center>          <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: Here we change the text based on input limit. If the value of input is less than 0 then it goes to 0. If it’s value is greater than 100 then it goes to 100 otherwise it stays as it is.
<!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">    <center>        <h1 style="color: green;">          GeeksforGeeks        </h1>        <b>          Edit an input value when it exceeds the limit        </b>        <br><br>                  <!-- Custom directive limit-to -->        <input limit-to="100" type="number" ng-model="val">        <br> {{text}}    </center>    <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>
AngularJS-Misc
Picked
AngularJS
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Routing in Angular 9/10
Angular PrimeNG Dropdown Component
Angular 10 (blur) Event
How to make a Bootstrap Modal Popup in Angular 9/8 ?
How to create module with Routing in Angular 9 ?
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form