采用了棱角分明1.3 ngMessage表单提交错误 [英] Using angular 1.3 ngMessage for form submission errors

问题描述

我已经得到表单验证我的应用程序登录页面正常工作的例子，看起来像这样：

I've gotten an example of form validation working correctly in my app for the login page, looking something like this:

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

这伟大工程必需的和MINLENGTH个检查，这可以在提交之前完成。但提交后，我们可以为一个无效的用户名/密码取回401。 1.3角有一个异步validaiton的概念，但它似乎提交之前运行，似乎不合理的尝试登录两次（一次只是为了看看他们是否能和提示错误）

This works great for "required" and "minlength" checks, which can be done before submission. However after submission, we can get back a 401 for an invalid username/password. Angular 1.3 has an async validaiton concept, but it seems to run before submission, and it seems unreasonable to try to login twice (once just to see if they could and prompt an error)

有没有使用NG的消息概念，显示此提交后的错误合理的方式？

Is there a reasonable way to use the ng-messages concept to display this post-submission error?

推荐答案

我想通了。你可以手动验证/无效的格式为：

I figured it out. You can just manually validate/invalidate the form:

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

和在你的控制器，在提交：

and in your controller, on submit:

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

这篇关于采用了棱角分明1.3 ngMessage表单提交错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！