Angular directive: Validate value before binding it to model

Question

Is there a way to not bind value to model , and ONLY bind it to model when value is valid.

you could use $validator on ngModel from directive..

Pankaj Parkar
– Pankaj Parkar

2015-11-16 06:39:24 +00:00
Commented Nov 16, 2015 at 6:39 — Pankaj Parkar
– Pankaj Parkar, Commented Nov 16, 2015 at 6:39

Community · Accepted Answer · 2017-05-23 12:33:21Z

1

Use $parsers. The example below restricts input to your model for numbers only. Obviously you can change that to be whatever you require to make your input valid.

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;
            });
        }
    };
});

<input type="text" name="number" only-digits>

Code sample comes from this SO question

edited May 23, 2017 at 12:33

CommunityBot

11 silver badge

answered Nov 16, 2015 at 6:30

Brian McAuliffe

2,1751 gold badge16 silver badges13 bronze badges

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

Collectives™ on Stack Overflow

Angular directive: Validate value before binding it to model

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