CODEWITHSUNDEEP
javascriptangularjs
Gabriel H
Gabriel H

Reputation: 1576

JS wont recognize a variable within angular controller object

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

Upvotes: 0

Views: 56

Answers (2)

Satpal
Satpal

Reputation: 133403

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;
        }
    };
});

Upvotes: 1

Karthick S P
Karthick S P

Reputation: 21

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

Upvotes: 0

Related Questions