JS wont recognize a variable within angular controller object

Question

Im trying to create a simple login verification, however the validation function seizes to function when the validation comparison begins, and the console sais that the variable "userName is not defined" although it clearly is.

Can enyone tell me what am i defining wrong?

the angular controller code:

var app = angular.module("LoginApp", []);
app.controller("LoginController", function ($http) {
    this.userName = "";
    this.password = "";
    this.userNameValid = true;
    this.passwordValid = true;

    /*submit the form*/
    this.submit = function () {
        alert("submit");
        this.validate();

    };

    /* make sure user name and password has been inserted*/
    this.validate = function () {
        alert("validate");
        var result = true;
        this.userNameValid = true;
        this.passwordValid = true;

        if (this.userName == "") {
            alert("username="+userName);
            this.userNameValid = false;
            result = false;
        }

        if (this.password == "") {
            this.passwordValid = false;
            result = false;
        }
        alert("validuserNameValid==" + userNameValid + " passwordValid==" + passwordValid);
        return result;
    };
});

the HTML form:

<body ng-app="LoginApp" ng-controller="LoginController as LoginController">

        <form role="form" novalidate name="loginForm" ng-submit="LoginController.submit()">
            <div id="loginDetails">
                <div class="form-group">
                    <label for="user"> User Name:</label>
                    <input type="text" id="user" class="form-control" ng-model="LoginController.userName" required />
                    <span ng-show="LoginController.userNameValid==false" class="alert-danger">field is requiered</span>
                </div>
                <div class="form-group">
                    <label for="password" >Password:</label>
                    <input type="password" id="password" class="form-control" ng-model="LoginController.password" required />
                    <span ng-show="LoginController.passwordValid==false" class="alert-danger">field is requiered</span>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-primary">Submit</button>
                    {{"entered information:" +"\n"+LoginController.userName+" "+ LoginController.password}}
                </div>
            </div>
        </form>
    </body>

the log:

Error: userName is not defined

this.validate@http://localhost:39191/login.js:23:13
this.submit@http://localhost:39191/login.js:11:9
anonymous/fn@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js line 231 > Function:2:292
b@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:126:19
Kc[b]</<.compile/</</e@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:274:195
uf/this.$get</m.prototype.$eval@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:145:103
uf/this.$get</m.prototype.$apply@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:145:335
Kc[b]</<.compile/</<@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:274:245
Rf@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:37:31
Qf/d@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:36:486

Can u have a look at below alert statment, shouldnt it be a this.userName ????if (this.userName == "") { alert("username="+userName); this.userNameValid = false; result = false; } — Ruhul
– Ruhul, Commented Aug 19, 2016 at 6:16

Satpal · Accepted Answer · 2016-08-19 06:19:16Z

1

Always use this judiciously. I would recommend you to store the reference of this in variable then use it wherever required.

var app = angular.module("LoginApp", []);
app.controller("LoginController", function ($http) {
    //Store the reference of this in a variable
    var lc = this;

    //Use the stored refrence
    lc.userName = "";

    /* make sure user name and password has been inserted*/
    lc.validate = function () {
        if (lc.userName == "") {
            alert("username="+userName);
            lc.userNameValid = false;
            result = false;
        }
    };
});

answered Aug 19, 2016 at 6:19

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

1 Comment

Erick Boshoff Over a year ago

This is the correct answer, by setting the context of the controller to a variable and then referencing the variable through out the controller.

Karthick S P · Accepted Answer · 2016-08-19 06:17:49Z

0

inside your alert boxes you have not mentioned this.userName try removing the alert boxes or change them.

answered Aug 19, 2016 at 6:17

Karthick S P

215 bronze badges

Collectives™ on Stack Overflow

JS wont recognize a variable within angular controller object

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related