AngularJS Restrict input to numbers does not work

Question

I have an input box on my html page with gets databound to an ng-model. I use a directive to restrict the input field to numbers only. I cannot used the default HTML5 restrictions like type="number". The problem I have is that if a non digit char is entered twice, e.g to press 123 and then two times k, the k is added to 123 resulting in 123k. However when I press another key, the k gets removed by the directive.

Can someone help me out to fix the problem that the letter appears if you press the same key twice

The directive I use:

angular.module('app').
directive('onlyDigits', function () {

return {
    restrict: 'A',
    require: '?ngModel',
    link: function (scope, element, attrs, ngModel) {
        if (!ngModel) return;
        ngModel.$parsers.unshift(function (inputValue) {
            var digits = inputValue.split('').filter(function (s) { return (!isNaN(s) && s != ' '); }).join('');
            ngModel.$viewValue = digits;
            ngModel.$render();
            return digits;
        });
    }
};

});

Use var digits = inputValue.replace(/[^\d]/g, ''); instead of filter to remove non integers. — dfsq
– dfsq, Commented Sep 7, 2015 at 20:02

Kyle Muir · Accepted Answer · 2015-09-07 19:58:08Z

1

This is what we use to achieve numbers only in a directive:

directives.directive('numbersOnly', function () {
    'use strict';
    return {
        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;
            });
        }
    };
});

answered Sep 7, 2015 at 19:58

Kyle Muir

3,9252 gold badges24 silver badges28 bronze badges

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

Collectives™ on Stack Overflow

AngularJS Restrict input to numbers does not work

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related