How to Reset an Input Value when Limit Exceeds using AngularJS ?
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 = </ 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 = </ 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 > |