AngularJS - 使用指令設置輸入表單的錯誤CSS類

Question

我有一個註冊表單，我想對已經在數據庫中註冊的電子郵件進行實時輸入驗證。

我有指令工作，所以它會觸發輸入框的每一個變化，但我很難讓Angular從範圍內設置合適的.error CSS類。

這裏是我的標記：

<form ng-app="mainApp" id="signup_form" name="signup_form" ng-controller="signupController" ng-submit="submit()" novalidate > 
        <fieldset> 
         <legend>Create New Account</legend> 
         <div class="control-group" ng-class="{ error: signup_form.username.$invalid }"> 
          <label class="control-label" for="username">Username</label> 
          <div class="controls"> 
           <input type="text" placeholder="Username" name="username"       
           ng-model="username" 
           ng-minlength=3 
           ng-maxlength=20 required /> 
          </div> 
         </div> 
         <div class="control-group" ng-class="{ error: signup_form.email.$invalid}"> 
          <label class="control-label" for="email">Email</label> 
          <div class="controls"> 
           <input type="text" placeholder="Email" name="email" 
           ng-model="email" 
           required 
           uniqueaddress/>   
          </div> 
         </div>   
          <ul> 
           <li ng-show="signup_form.$error.required" class="error">Field is required.</li> 
           <li ng-show="signup_form.$error.minlength" class="error">Field must at least 3 characters</li> 
           <li ng-show="signup_form.$error.maxlength" class="error">Field is too long.</li> 
           <li ng-show="signup_form.$error.uniqueaddress" class="error">Email is already in use</li> 
          </ul> 
        </fieldset> 
        <button type="submit" ng-disabled="signup_form.$invalid" class="btn">Submit</button> 
      </form> 

通知第二輸入框中輸入指令屬性 'uniqueaddress'。這裏是我的uniqueaddress指令：

mainApp.directive('uniqueaddress', function() { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs, ctrl) 
     { 
      var isEmailValid = false; 
      var isEmailValid = scope.$watch(attrs.ngModel, function (email) 
      { 
       if(email == 'test') 
        scope.signup_form.$setValidity('uniqueaddress', false); 
       else 
        scope.signup_form.$setValidity('uniqueaddress', true); 
      });  
     } 
    }; 
}); 

這裏是demonstarting問題的小提琴： http://jsfiddle.net/k4Cty/10/

Type在任何3個字符串和驗證工作正常用戶名字段。對於電子郵件字段，如果您輸入字符串'test'，驗證會觸發並且出現標記爲ng-show="signup_form.$error.uniqueaddress"的<li>項目，但.error類未設置爲<div class="control-group">，因爲它不會變成紅色，表示驗證錯誤。它似乎設置.error類爲默認ng-minlength和required指令正在觸發，但不是uniqueaddress。我在這裏做錯了什麼？

Answer 1

This fiddle將您的和丟棄在一個非常標準的方法中，使用指令添加驗證。要點：

1. require該元素的ngModel控制器，在那裏你將連線在你的驗證。
2. 當從DOM解析值時，在$parsers的數組的開頭放置一個函數以執行驗證。
3. 在DOM從模型更新時，在$formatters數組的開頭放置一個類似的函數以執行驗證。

有關驗證程序如何工作的更多信息，請參見this article ("Custom Validation")。

您不應該嘗試訪問包含表單的$setValidity()函數。這種方法沒有證件，可重用性有限。您還想要定位您要檢查的有效性字段，而不是錯誤類型。最後formname.$dirty是你的朋友。我認爲angularJS驗證器有點急切，因爲當你輸入一個值時，驗證器會給你提供錯誤反饋，並且當你甚至還沒有填寫表單時，你都會看到錯誤，所以很惱人。儘量讓它看起來不那麼恐慌。