使用 Angular 1.3 ngMessage 处理表单提交错误答案

【问题标题】：Using angular 1.3 ngMessage for form submission errors使用 Angular 1.3 ngMessage 处理表单提交错误
【发布时间】：2014-11-06 21:00:45
【问题描述】：

我得到了一个表单验证示例，该示例在我的登录页面的应用中正常工作，如下所示：

 <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 有一个异步验证的概念，但它似乎在提交之前运行，并且尝试登录两次似乎不合理（一次只是为了看看他们是否可以并提示错误）

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

【问题讨论】：

标签： javascript angularjs forms

【解决方案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>

在您的控制器中，提交时：

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

【讨论】：