Loop in directive and ng-change Angular JS

Question

I have the next problem, I created a directive in Angular JS to check if input is or not a number, If it isn't number is neccesary set the right value. Here is my directive code:

app.directive('numberValidate', function(){
    return {
        require: 'ngModel',
        link: function($scope, element, attr, modelCtrl){

            modelCtrl.$parsers.push(function (inputValue){

                var transformedInput = parseInt(inputValue); 

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

additional I need to listen when the user stop typping to send a request. To listen when stop I've added ng-model-options="{debounce: 750}" to the field, as it is on the next code:

<input type="text" ng-change="sendChecker()" ng-model="identification" ng-model-options="{debounce: 750}" number-validate>

sendChecker function fires my request to the server, everything is working Ok when I write a number like 12345 or I type a number with characteres 12345a this is converted to number and set in the input, The issue is when I write a letter a this creates a loop. How can I avoid this?

Any advice would be apreciated.

Shouldn't you be checking that transformedInput is actually a number? — yBrodsky
– yBrodsky, Commented May 4, 2016 at 20:11
Try the isNaN() function at: w3schools.com/jsref/jsref_isNaN.asp — Yosvel Quintero
– Yosvel Quintero, Commented May 4, 2016 at 20:15
Maybe just use input type number? Shortcut, but it only accepts numbers. Then work the rest out. — alphapilgrim
– alphapilgrim, Commented May 4, 2016 at 20:26
@alphapilgrim If I detect is not number, I have set the right on the input text in this case 12345a would be 12345. — Jose Rojas
– Jose Rojas, Commented May 4, 2016 at 20:29

Simon Schüpbach · Accepted Answer · 2016-05-04 21:38:53Z

2

Why you don't use ng-pattern to validate your input?

<input type="text" ng-pattern=/^[0-9]+$/ ng-model="identification" ng-model-options="{debounce: 750}">

Or you can use input type number

 <input type="number" ng-model="identification" ng-model-options="{debounce: 750}">

Then you don't have to validate something by your own?

Edit:

In the following example sendChecker() is only called if user inserted a valid value

<form name="myform">
     <input type="number" name="myinput" ng-changed="myform.myinput.$valid ? sendChecker(identification) : " ng-model="identification" ng-model-options="{debounce: 750}">
</form>

edited May 4, 2016 at 21:38

answered May 4, 2016 at 20:39

Simon Schüpbach

2,6833 gold badges15 silver badges26 bronze badges

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

4 Comments

Jose Rojas Over a year ago

How would you recommend set the value in case ng-pattern? I mean if isn't integer I must set the number value

Simon Schüpbach Over a year ago

Sorry, I don't understand your question. Which value you want to set? To match numbers only you can use the pattern from my example.

Simon Schüpbach Over a year ago

Why you want change the content of input field?

Jose Rojas Over a year ago

Becuase the value of input on the request must be a number, and the value after the directive go to sendChecker method to be sent

shershen · Accepted Answer · 2016-05-04 20:11:57Z

0

Because parseInt('12345a') == 12345 you get into loop. So you need to either filter out the non digits from string.

answered May 4, 2016 at 20:11

shershen

10k11 gold badges44 silver badges62 bronze badges

1 Comment

Jose Rojas Over a year ago

When I write 12345a the behaviour is right, the problem is when I write a this is what create the loop.

Collectives™ on Stack Overflow

Loop in directive and ng-change Angular JS

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related