ng-repeat表單項目的AngularJS驗證

Question

我正在尋找一些指導。

下面是一些代碼，我有：

<div ng-repeat="q in questions"> 
    <div class="panel panel-info"> 
     <div class="panel-heading"> 
      <h3 class="panel-title"><span ng-bind="q.questionText"></span></h3> 
     </div> 
     <div class="panel-body"> 
      <answer-field question="q"></answer-field> 
     </div> 
    </div> 
</div> 

answer-field是一個指令，而且基本上取決於什麼q是某種類型的表單域將顯示像select箱或input text箱等。

例如，選擇框可能是：

<div class='form-group'> 
    <select class='form-control' ng-model='question.answer' ng-options='item for item in question.choices' required> 
     <option value=''>Select an option...</option> 
    </select> 
</div> 

且文本字段可能是：

<div class='form-group'> 
    <input class='form-control' type='text' ng-model='question.answer' required /> 
</div> 

正如你所看到的，我已經加入required，這是否在技術上的工作。瀏覽器會顯示錯誤，說如果我嘗試提交，我需要填寫該字段。

我想雖然是更美觀一點。 Bootstrap例如有has-error。如果我可以使form-group顯示has-error，而不是默認瀏覽器「填寫此字段」消息，並且理想情況下顯示確實有錯誤的項目列表，則會很好。

我該怎麼辦？

Answer 1

Angular has novalidate。它抑制了原生HTML驗證，允許你自己放置。至於如何顯示自定義錯誤，它也在該頁面中。

Answer 2

我經常喜歡如下顯示自定義錯誤消息：

<div class="form-group"> 
    <label for="inputPassword" class="control-label">Password</label> 
    <input type="password" id="inputPassword" name="password" class="form-control" ng-model="user.password" placeholder="Password" required> 
    </div> 

    <div class="form-group has-error"> 
    <p class="help-block" ng-show="form.password.$error.required && submitted"> 
     Please enter password. 
    </p> 
    </div> 

，或者您可以使用ng-class到has-error類追加到基於表達式