javascript - Angular.js accessing model from controller (server validation) - Stack Overflow

admin管理员组

文章数量:1421256

i now trying to migrate my legace app to Angular and now stuck with following issue. I have this simple form:

<form name="loginForm" ng-controller="LoginCtrl" ng-submit="doLogin()">
  <input type="text" name="login" ng-model="login.login" />
  <span class="errors" ng-show="loginForm.login.$error.required">Required</span>
  <span class="errors" ng-show="loginForm.login.$error.bad_login">Login or pass incorrect</span>
  <input type="password" ng-model="login.pass"/>
</form>

Server returns error as this type of JSON: { login: 'bad_login', pass: 'incorrect' } And in controller:

function LoginCtrl($scope, $http) {

    $scope.doLogin = function() {
        var model = $scope.login;
        var req = { "login": model.login, "pass": model.pass };
        $http({ method: "POST", url: "/login", data: req }).success(function (resp) {
            if(resp.status != "ok") {
                angular.forEach(resp, function (value, key) {
                    // ex: model['login'].$setValidity('bad_login', false);
                    model[key].$setValidity(value, false);
                });
            }
        });
    };
}

I try to mark each field in loop, not to hardcode every field by hand. but this approach not working. I get this error: TypeError: Cannot call method '$setValidity' of undefined, even when field is left empty i have another error: TypeError: Cannot read property 'login' of undefined So i think i need to get instance of model for every field in form, any ideas ?

i now trying to migrate my legace app to Angular and now stuck with following issue. I have this simple form:

<form name="loginForm" ng-controller="LoginCtrl" ng-submit="doLogin()">
  <input type="text" name="login" ng-model="login.login" />
  <span class="errors" ng-show="loginForm.login.$error.required">Required</span>
  <span class="errors" ng-show="loginForm.login.$error.bad_login">Login or pass incorrect</span>
  <input type="password" ng-model="login.pass"/>
</form>

Server returns error as this type of JSON: { login: 'bad_login', pass: 'incorrect' } And in controller:

function LoginCtrl($scope, $http) {

    $scope.doLogin = function() {
        var model = $scope.login;
        var req = { "login": model.login, "pass": model.pass };
        $http({ method: "POST", url: "/login", data: req }).success(function (resp) {
            if(resp.status != "ok") {
                angular.forEach(resp, function (value, key) {
                    // ex: model['login'].$setValidity('bad_login', false);
                    model[key].$setValidity(value, false);
                });
            }
        });
    };
}

I try to mark each field in loop, not to hardcode every field by hand. but this approach not working. I get this error: TypeError: Cannot call method '$setValidity' of undefined, even when field is left empty i have another error: TypeError: Cannot read property 'login' of undefined So i think i need to get instance of model for every field in form, any ideas ?

• javascript
• angularjs

Share Improve this question Follow edited Dec 26, 2012 at 13:11 Dfr asked Dec 26, 2012 at 9:14 DfrDfr 4,1851010 gold badges4545 silver badges6666 bronze badges 4

• 1 If I read your code correctly, is your model 'model', not model[k]. Try to use meaningful parameter names please. Not v, k, p. – asgoth Commented Dec 26, 2012 at 10:56
• Updated my post, thank you for remark. I guess i should have 2 models here, 1 model for each field to mark errors independently. I think i understand now that $scope.login is model and $scope.login.pass is not model, but plain string ? – Dfr Commented Dec 26, 2012 at 11:14
• Indeed, you need two models (login and pass), on which you can use $setValidity() then. – asgoth Commented Dec 26, 2012 at 12:02
• I update my post, now i guess i have 2 models, but result is almost the same – Dfr Commented Dec 26, 2012 at 13:12

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

The reason it's ing back undefined is because unless you actually specify something for $scope.login.login or $scope.login.pass to begin with, they aren't set. If you put a space and delete it, you'll see they are set as blank. What you're going to want to do is at the beginning of your controller define the login on the scope like so:

function LoginCtrl($scope, $http) {
    $scope.login = {
        login: "",
        pass: ""
    };
    $scope.doLogin = function() {
        var req = { "login": $scope.login.login, "pass": $scope.login.pass };
        $http({ method: "POST", url: "/login", data: req }).success(function (resp) {
            if(resp.status != "ok") {
                angular.forEach(resp, function (value, key) {
                    // ex: model['login'].$setValidity('bad_login', false);
                    $scope.login[key].$setValidity(value, false);
                });
            }
        });
    };
}

本文标签： javascriptAngularjs accessing model from controller (server validation)Stack Overflow