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