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有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类附加到第一个div