2014-11-06 39 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); 
    }); 
}