2014-11-06 55 views
3

我已经得到形式验证我的应用程序登录页面正常工作的例子,看起来像这样:采用了棱角分明1.3 ngMessage表单提交错误

<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用于输入无效的用户名/密码。 Angular 1.3有一个异步验证的概念,但它似乎在提交之前运行,并且尝试登录两次似乎是不合理的(一次只是为了查看它们是否可以并提示错误)

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

回答

6

我想通了。你可以手动验证/无效形式:

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