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。如果不是默认的浏览器，那就太好了＃34;填写这个字段＆＃34;如果我可以显示form-group显示has-error - 并且理想地显示确实存在错误的项目列表。

我该如何解决这个问题？

Answer 1

Angular has novalidate。它会抑制本机HTML验证，允许您放入自己的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

对ng-repeat表单项进行AngularJS验证

2 个答案: