This AngularJS directive validates numeric entry. It uses a regular expression to test whether the input matches the expected numeric format and set the validity state of the element.
How does this work?
The $parsers array is an array of functions which can test the value on the input element. They pass the value along to other parsers by returning the value. I change the value by removing any commas so the returned numeric string can be used as a Number.
In the directive, I capture the value of the directive attribute and add a parser function and formatter function to the respective arrays passed in.
The $formatters array is an array of functions which can format the model value for display in the input element. I use the built-in "numberFilter" for this.
View/Run/Edit the example in Plunker
app.directive('isNumber', ['numberFilter',function(numberFilter){ return{ require:'ngModel', link: function(scope, elem, attrs, ctrl){ var digits = attrs.isNumber.length===0 ? "2" : attrs.isNumber; ctrl.$parsers.unshift(checkForNumber); ctrl.$formatters.unshift(formatNumber); function checkForNumber(viewValue){ // Checks for positive or negative decimal or integer number with or without thousand separators if (/^-{0,1}\d{1,3}(,\d{3})*\.{0,1}\d*$|^-{0,1}\d*\.{0,1}\d*$/.test(viewValue)) { ctrl.$setValidity('isNumber',true); } else{ ctrl.$setValidity('isNumber', false); } return viewValue.replace(/,/g,''); } function formatNumber(viewValue) { return numberFilter(viewValue,digits); } } }; }]);
Tutorial and subject on angularjs mentioned on this blog was like attending online Angularjs training. Thanks for the step by step instructions with presentation.
ReplyDelete