Input text value only number press using Angularjs?

Sathya Sambath

Hi..

Input Text box Values only number using ng-pattern method but input value alphabet allow the key press .if any other method using only number key press event the angular js.

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Manikandan Murugesan9y ago
Accepted answer
This functionality just what you need.http://docs.angularjs.org/api/ng.directive:input.number

EDIT:
You can wrap the jquery plugin into directive. I created an example here:http://goo.gl/yYM2A
or use this code
angular.module('app').
  directive('onlyDigits', function () {

    return {
        restrict: 'A',
        require: '?ngModel',
        link: function (scope, element, attrs, modelCtrl) {
            modelCtrl.$parsers.push(function (inputValue) {
                if (inputValue == undefined) return '';
                var transformedInput = inputValue.replace(/[^0-9]/g, '');
                if (transformedInput !== inputValue) {
                    modelCtrl.$setViewValue(transformedInput);
                    modelCtrl.$render();
                }
                return transformedInput;
            });
        }
    };
});
Manikandan Murugesan9y ago
Easy way, use type="number" if it works for your use case:
"number" ng-model="myText" name="inputName">
Another easy way: ng-pattern can also be used to define a regex that will limit what is allowed in the field. See also the "cookbook" page about forms.
Hackish? way, $watch the ng-model in your controller:
"text"  ng-model="myText" name="inputName">
In Controller:

$scope.$watch('myText', function() {
   // put numbersOnly() logic here, e.g.:
   if ($scope.myText  ... regex to look for ... ) {
      // strip out the non-numbers
   }
})
Vivek Kumar9y ago
Hi Sathya,
You can simply use set attribute as type="number" in your textbox.If your requirement is something else then please elaborate.