angular validate input type=“number” validation issue

Question

I was having an issue with input type number validation when user enters character.

It just got disappear when user tab out.

After little reseach i found couple of solutions and the best one is link

The solution given here is to use the following directive

app.directive('toNumber', function () {
    return {
        require: 'ngModel',
        link: function (scope, elem, attrs, ctrl) {
            ctrl.$parsers.push(function (value) {
                return parseFloat(value || '');
            });
        }
    };
});

This solution works fine if user try to enter 1st character other than number. However it does not work when user enters lets say 1W. It allows to enter this pattern.

Probably, i need to modify this directive to blovk 1W, 1.W, 1WWW (any character after valid number) patterns to be blocked from entering.

Any help?

Also,

please share if there is any better solution to what i am looking for. My problem is: on IE, when user enters character in input type number and tab out, the number just disappear and i am unable to show error using angular $error.

Sumodh S · Accepted Answer · 2015-09-15 13:53:12Z

1

Try this directive

userapp.directive('priceValidator', [function() {
    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 15, 2015 at 13:53

Sumodh S

7411 gold badge17 silver badges39 bronze badges

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

Collectives™ on Stack Overflow

angular validate input type=“number” validation issue

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related