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类追加到基于表达式