Directive not working for input type=number using angularjs

Question

I have a input type= number field.It allows whole number and decimal number.But I need only whole number to be enter in the input.I have created a directive which is working only for input type=text,not working for input type=number.The reason is I need a number keyboard in mobile.

Below code is for number only,

Angularjs :

.directive('numbersOnly', function () {
return {
    require: 'ngModel',
    link: function (scope, element, attr, ngModelCtrl) {
        function fromUser(text) {
            if (text) {
                var transformedInput = text.replace(/[^0-9-]/g, '');
                if (transformedInput !== text) {
                    ngModelCtrl.$setViewValue(transformedInput);
                    ngModelCtrl.$render();
                }
                return transformedInput;
            }
            return '';
        }
        ngModelCtrl.$parsers.push(fromUser);
    }
};
})

Html:

  <input type="number" ng-model="points" numbers-only  required>

Any suggestions welcome

vorant · Accepted Answer · 2016-02-06 11:59:32Z

1

Try this

html

<input type="text"  ng-model="myText" name="inputName" numbers-only>

directive

myApp.directive('numbersOnly', function(){
     return {
         require: 'ngModel',
         link: function(scope, element, attrs, modelCtrl) {
             modelCtrl.$parsers.push(function (inputValue) {
                 var transformedInput = inputValue ? inputValue.replace(/[^\d.-]/g,'').replace('.','') : null;

                 if (transformedInput != inputValue) {
                   modelCtrl.$setViewValue(transformedInput);
                   modelCtrl.$render();
                 }

                 return transformedInput;
             });
          }
      };
});

https://jsfiddle.net/vorant/Lzw0yoma/

answered Feb 6, 2016 at 11:59

vorant

7085 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Claies Over a year ago

this still doesn't solve the root question, which is using type="number".

Mohideen Over a year ago

thanks for the reply.but I need the solutions for input type="number".

Collectives™ on Stack Overflow

Directive not working for input type=number using angularjs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related