Javascript AngularJS服务器和客户端表单验证

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

客户端验证工作正常，直到我提交表单并返回404状态。返回404状态时，将显示loginForm.$invalid错误，但当我再次更改用户名和密码输入时，客户端验证不会将表单状态更改回valid

---

是否有一种标准方法可以在同一表单中执行这种客户端+服务器端验证？

我认为您不应该直接修改表单

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

$scope.login=function（）{
$http.post（'url'{
“密码”：$scope.password
}).success（函数（数据、状态、标题、配置）{
控制台日志（状态）；
控制台日志（数据）；
}).error（函数（数据、状态、标题、配置）{
如果（404==状态）{
$scope.invalidUsernamePassword=true；//这是一个很好的服务器端验证指令，可能很有用。
你在这里真的有一点：）在我发布我的问题之前，我尝试执行$scope.loginForm.$setValidity（'somekey'，false）结果是它创建了$scope.loginForm.$error.somekey等于undefined。我可能做得不对。你有什么想法吗？@lucassp有两个
$setValidity
方法。一个在表单控制器上，另一个在ngModel控制器上。问题是，第一个是内部方法，你不应该这样做直接调用它（实际上需要三个参数）。因此，您应该这样做：
username.$setValidity（'validCredentials'，false）
$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>