Using element.bind in validation directive

Question

I trying to validate input with custom directive:

.directive('customValidation', function () {
        return {
            require: 'ngModel',
            link: function (scope, element, attr, ngModelCtrl) {
                function fromUser(text) {
                    element.bind("keydown keypress", function (event) {
                        if (!(event.keyCode >= 48 && event.keyCode <= 57)) {
                            return undefined;
                        }
                    })
                }
                ngModelCtrl.$parsers.push(fromUser);
            }
        };
    });

but it doesn't work. Any character is passes validation. What I doing wrong?

Try that plugin plugins.jquery.com/numberMask and uses the link function to join with your field: Ex: $(element).numberMask({beforePoint:2}); — Joao Polo
– Joao Polo, Commented Jan 30, 2017 at 16:12

PerfectPixel · Accepted Answer · 2017-01-30 15:57:25Z

1

So basically what you are trying to achieve is to check if an input contains only numbers. At least that is what I can understand from your explanation and the sample code.

First, you are using a parser, which are used for sanitizing and converting values passed from the DOM to the model. Validation comes afterwards. If you just want to check if only numbers are written, then you need something like this:

ngModel.$validators.validCharacters = function(modelValue, viewValue) {
  var value = modelValue || viewValue;
  return /[0-9]+/.test(value);
};

I suggest reading the API docs as they explain all ngModelController functionality very thoroughly: click here for thorough docs

Second, you are binding to a event everytime your parser is called. The parser is called each time you change the contents of your input element. If you type the word everytime into your input, you end up binding the event nine times! Apart from the fact that binding to the event after you changed something is too late as your first event was already fired.

answered Jan 30, 2017 at 15:57

PerfectPixel

1,9881 gold badge17 silver badges18 bronze badges

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

1 Comment

Joao Polo Over a year ago

Probably he needs to disable the entry of other characters than numbers... I used a jquery plugin for that (), and I used the link to join with angular.

Collectives™ on Stack Overflow

Using element.bind in validation directive

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related