Angular making input field null on validation failure

Question

I am creating a member registration form where he enters his membership card number. The membership card number is a 19 digit number which starts with 6 4's and then followed by 13 digits.Now the user has the option to enter either last 13 digits alone or he can even enter the complete 19 digits. When he enters complete 19 digits on the blur event i trim the 1st 6 digits which leaves the last 13 digits. My code works fine for all scenarios but something weird happens when error happens in 1 particular scenario.

Working Scenarios are

If the user types anything less then 13 digits or more then 19 digits i have a regex which validates the user input and shows the error message.
If the user just types 13 digits, its fine
If user types perfect 19 digits but his starting 6 digits are not 4's then error is diplayed.

Failed Scenario

But when user types any digit >13 and <19 error message is triggered but my input field becomes empty, i.e. whatever user has typed just vanishes. Is this angular library issue

Please find the code below-

HTML

    <input type="text" ng-model="user.CardNumber" ng-blur="trimCardNumber()" ng-required="true" ng-pattern="/^[0-9]{13,19}$/" name="CardNumber">

Controller.JS

    $scope.trimCardNumber = function () {
    if (($scope.user.CardNumber).indexOf("444444") > -1) {
        $scope.user.CardNumber = ($scope.user.CardNumber).replace("444444", "");
        $scope._ServerForm.CardNumber.$invalid = false;
        return true;
    }
    else if ($scope.user.CardNumber.length != 13) {
        $scope._ServerForm.CardNumber.$invalid = true;
    }
    else {
        $scope._ServerForm.CardNumber.$invalid = false;
    }
}

I have created a JS fiddle for the issue - http://jsfiddle.net/achyut/x69hZ/1/

Steps to reproduce -

Type 444444123456789012 and blur to see the issue

Is it possible somewhere in your code you reinitialize the model of user.CardNumber? — Alexander Nenkov
– Alexander Nenkov, Commented Feb 6, 2014 at 11:49
Failed scenario only happens when the first digits are 4's right? — Bertrand
– Bertrand, Commented Feb 6, 2014 at 11:54
@AlexanderNenkov - Inside the Trim function i am reassigning the model the trimed value — Achyut
– Achyut, Commented Feb 6, 2014 at 11:58
@Bertrand - The issue happens after the trim has happened and the regex has failed — Achyut
– Achyut, Commented Feb 6, 2014 at 12:03

Sai · Accepted Answer · 2014-02-06 12:23:19Z

3

The issue is discussed in the following thread

input not showing invalid model values

You can create your custom directive and validate it accordingly.

answered Feb 6, 2014 at 12:23

Sai

2,06819 silver badges26 bronze badges

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

Comments

Bertrand · Accepted Answer · 2014-02-06 12:13:25Z

1

This is happening because of the way the digest cycle works.

When blur occurs trimCardNumber() removes the six 4's from the input.

$scope.user.CardNumber = $scope.user.CardNumber.replace("444444", "");

Because something changed during the digest cycle it becomes dirty and so a second round is triggered. In the second round the input now has less digits and this is causing the regex to invalidate it and clean the user.CardNumber model.

For example this card number (with 19 digits) will fail: 4444441111111111111 because after removing the 4's it will be invalidated by the regex.

if you change the regex to accept 12 to 19 the number above will work but a 18 numbers long would also fail.

Here is a fiddle

I think the solution is to move the regex inside trimCardNumber(), or even better, you could create a custom validation for the input.

answered Feb 6, 2014 at 12:13

Bertrand

13.6k5 gold badges41 silver badges48 bronze badges

3 Comments

Achyut Over a year ago

1 doubt - You said the regex invalidates the input tag and CLEAN the user.CardNumber Model. Exactly this is my question. Is this expected behaviour from Angular JS to clean the model on regex failure. Then it should also do the same when i just type 2 digits and blurs out. In this scenario also regex is failing

Bertrand Over a year ago

It cleans the model and because of the two-way binding the input is also cleared (again, because the dirty check). Check this fiddle. I have set a $watcher on the user, start with a valid card number and watch your console. If the regex is valid the user receives the input's value, put a letter in the card number (so regex invalidates it) and the model will get cleared.

Bertrand Over a year ago

as mentioned by @Sai this is a known issue github.com/angular/angular.js/issues/1412

Collectives™ on Stack Overflow

Angular making input field null on validation failure

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related