3

AngularJSでクライアント側の検証とサーバー側の検証を組み合わせるのに問題があります。HTMLは次のとおりです。

<form class="form-login" name="loginForm" novalidate ng-submit="login()">
    <fieldset>
        <h2>Login</h2>
        <input type="text" required class="input-block-level" placeholder="Username" ng-model="username" name="username">
        <div ng-show="loginForm.username.$dirty && loginForm.username.$invalid">
            <span ng-show="loginForm.username.$error.required">Username required.</span>
        </div>
        <input type="password" required class="input-block-level" placeholder="Password" ng-model="password" name="password">
        <div ng-show="loginForm.password.$dirty && loginForm.password.$invalid">
            <span ng-show="loginForm.password.$error.required">Password required.</span>
        </div>
        <div ng-show="loginForm.username.$dirty && loginForm.password.$dirty && loginForm.$invalid">
            <span>Invalid username or password</span>
        </div>
        <p><a href="#forgotPassword" data-toggle="modal" class="btn btn-link">Forgot password?</a></p>
        <p><button class="btn btn-primary btn-large" ng-disabled="loginForm.$invalid" type="submit">Login</button></p>
    </fieldset>
</form>

...そしてこれがログイン機能です：

$scope.login = function() {
    $http.post('url', {
        "password": $scope.password
    }).success(function(data, status, headers, config) {
        console.log(status);
        console.log(data);
    }).error(function(data, status, headers, config) {
        if (404 === status) {
            $scope.loginForm.$invalid = true;
        }
    });
    return false;
}

フォームを送信して404ステータスを返すまで、クライアント側の検証は正常に機能します。404ステータスが返されると、loginForm。$ invalidエラーが表示されますが、ユーザー名とパスワードの入力を再度変更しても、クライアント側の検証ではフォームの状態が有効に戻りません。

この種のクライアント側とサーバー側の検証を同じ形式で行う標準的な方法はありますか？

4

2 に答える 2

4

$invalidフォームを変更したり、$valid直接変更したりすることはないと思います。を介してそれを行う必要があります$setValidity(validationErrorKey, isValid)。

「無効なユーザー名/パスワード」ステータスを別のスコーププロパティに保存しないのはなぜですか？

$scope.login = function() {
    $http.post('url', {
        "password": $scope.password
    }).success(function(data, status, headers, config) {
        console.log(status);
        console.log(data);
    }).error(function(data, status, headers, config) {
        if (404 === status) {
            $scope.invalidUsernamePassword = true; // <--------------
        }
    });
    return false;
}

そして、テンプレートはよりシンプルになります：

<div ng-show="invalidUsernamePassword">
    <span>Invalid username or password</span>
</div>
于 2013-01-04T22:25:52.547 に答える
1

https://groups.google.com/forum/#!msg/angular/6v-AillQboI/D0OaZzV7Me0Jに役立つ可能性のある優れたサーバー側検証ディレクティブを次に示します。

于 2013-02-04T20:30:08.003 に答える