3

私は今、レガシーアプリをAngularに移行しようとしていますが、次の問題で立ち往生しています。私はこの単純なフォームを持っています:

<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>

サーバーは、次のタイプの JSON としてエラーを返します: { login: 'bad_login', pass: 'incorrect' } そしてコントローラー:

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

すべてのフィールドを手作業でハードコーディングするのではなく、ループ内の各フィールドにマークを付けようとしています。しかし、このアプローチは機能しません。このエラーが発生します: TypeError: Cannot call method '$setValidity' of undefined、フィールドが空のままの場合でも、別のエラーがあります:TypeError: Cannot read property 'login' of undefined フォームのすべてのフィールドのモデルのインスタンスを取得する必要があると思いますか?

4

1 に答える 1

3

未定義に戻ってくる理由は、最初に $scope.login.login または $scope.login.pass に実際に何かを指定しない限り、それらが設定されないためです。スペースを入れて削除すると、空白として設定されていることがわかります。あなたがしたいことは、コントローラーの冒頭で、次のようにスコープでログインを定義することです。

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);
                });
            }
        });
    };
}
于 2012-12-26T15:59:53.803 に答える