javascript - 使用 angular 1.3 ngMessage 处理表单提交错误

Question

我在我的登录页面应用程序中获得了一个表单验证正常工作的示例，看起来像这样:

 <div class="form-group" >
            <label for="password">Password</label>
            <input type="password"
                   id="password"
                   name="password"
                   class="form-control"
                   placeholder="Create password"
                   ng-model="password"
                   required
                   minlength="{{passwordLength}}"
                   >
            <div class="help-block text-danger"
                 ng-messages="form.password.$error"
                 ng-if="form.password.$touched || form.$submitted"
                 >
              <div class="text-danger">
                <div ng-message="required">A password is required</div>
                <div ng-message="minlength" >Password must be at least {{passwordLength}} characters</div>
              </div>

            </div>
          </div>

这对于“必需”和“最小长度”检查非常有效，可以在提交之前完成。然而在提交之后，我们可以得到无效用户名/密码的 401。 Angular 1.3有一个async validaiton的概念，但是好像是在提交之前运行，而且尝试登录两次似乎不合理(一次只是为了看看他们是否可以并提示错误)

是否有合理的方式使用 ng-messages 概念来显示此提交后错误？

Answer 1

我想通了。您可以手动验证/使表单无效:

<div class="help-block text-danger">
            <div class="text-danger"
                 ng-messages="form.password.$error"
                 ng-if="form.password.$touched || form.$submitted">
              <div ng-message="required">Password is required</div>
              <div ng-message="minlength">*Password must be at least {{passwordLength}} characters</div>
              <div ng-message="correctPassword">Username/Password combination is incorrect</div>
            </div>
          </div>

在你的 Controller 中，在提交时:

 $scope.login = function(){
    $scope.form.password.$setValidity("correctPassword", true);
    // ...do some stuff...
    $http.post('/someUrl', {msg:'hello word!'})
      .success(function(){})
      .error(function() {
         $scope.form.password.$setValidity("correctPassword", false);
  });
 }