angularjs old input field value overriding new input value using scope

Question

html:

username: <input type="text" ng-model="username" /><br />
password: <input type="text" ng-model="password" /><br />
<button class="btn btn-primary" type="button" ng-click="login()">Login</button>

js:

$scope.login = function(){
    var user = $scope.username;
    var pass = $scope.password;
    if(user != undefined && pass != undefined){
    alert("NOT BLANK" + " user: " + user + " pass: " + pass);
    } else {
    alert("BLANK");
    }
};

Question: When I click Login for the first time with input values from the 2 fields, alert is showing NOT BLANK user: test pass: value, but when I remove the values from the fields and click Login, alert shows NOT BLANK user: pass: which is not correct since the fields values have been removed. If I refresh the page, and click Login, alert will show BLANK. I think it is issue with cache. can someone help. I am novice with angularjs

David Losert · Accepted Answer · 2014-03-14 18:38:48Z

1

This is not a Cache Issue. By checking with != undefined all you do is check if the String or Variable was defined - but it still can be an empty String.

So basically what happens is: you enter something, and the two Strings for user and pass get initialized. From this time, a check for undefined will always return false. When you remove all letters, the two Variables still contain a String-Object, just without characters (basically like this: var user = '').

Change your code to the following, that should work:

$scope.login = function(){
   var user = $scope.username;
   var pass = $scope.password;
   if(!user && !pass){
      alert("BLANK");
   } else {

     alert("NOT BLANK" + " user: " + user + " pass: " + pass);
 }
};

edited Mar 14, 2014 at 18:38

answered Mar 14, 2014 at 18:18

David Losert

4,8221 gold badge28 silver badges31 bronze badges

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

1 Comment

onelazyguy Over a year ago

Does not work! When click on Login without any values from the fields, I get NOT BLANK user: undefined pass: undefined. When I enter values onto the fields, then press Login, I get BLANK

musically_ut · Accepted Answer · 2014-03-14 18:32:09Z

0

The checks user != undefined && pass != undefined) are too stringent.

You should check for empty strings: user === '' && pass === ''.

Update:

Initialize the values such that they are initially not undefined either:

var user = $scope.username || '';
var pass = $scope.password || '';

edited Mar 14, 2014 at 18:32

answered Mar 14, 2014 at 17:56

musically_ut

34.3k9 gold badges98 silver badges110 bronze badges

3 Comments

onelazyguy Over a year ago

That doesn't work. It will always display BLANK and will not go into the if statement

onelazyguy Over a year ago

I changed to the following js script and it works. js: $scope.login = function(){ var user = $scope.username; var pass = $scope.password; if(user && pass){ alert("NOT BLANK" + " user: " + user + " pass: " + pass); } else { alert("BLANK"); } };

musically_ut Over a year ago

@user3420947 I have updated the answer and I would consider using more concrete types for your variables instead of relying on falsy values. I have been burned by a valid value being '0' oft enough. :-)

Collectives™ on Stack Overflow

angularjs old input field value overriding new input value using scope

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related