调和Angular.js和Bootstrap表单验证造型 [英] Reconcile Angular.js and Bootstrap form validation styling

问题描述

我使用的角度与引导。这里是code，以供参考：

I am using Angular with Bootstrap. Here is the code for reference:

<form name="newUserForm" ng-submit="add()" class="" novalidate>
    <input type="text" class="input" ng-model="newUser.uname" placeholder="Twitter" ng-pattern="/^@[A-Za-z0-9_]{1,15}$/" required></td>
    <button type="submit" ng-disabled="newUserForm.$invalid" class="btn btn-add btn-primary">Add</button>
</form>

引导有无效域样式的形式输入：无效{....} ;这些踢当字段为空。现在，我也有一些通过模式匹配角度。这产生奇数情况下，当：无效是关闭的，但.ng-无效，是上，这需要我为.ng-无效级重新实现自举CSS类

Bootstrap has styles for invalid fields in the form of input:invalid {.... }; these kick in when the field is empty. Now I also have some pattern matching via Angular. This creates odd cases when ":invalid" is off, but ".ng-invalid" is on, which would require me to re-implement bootstrap CSS classes for the ".ng-invalid" class.

我看到两个选项，但有既麻烦

I see two options, but having trouble with both

• 请用角一些自定义的类名，而不是NG-有效（我不知道如何做到这一点）。


• 禁用HTML5验证（我认为这就是NOVALIDATE属性的表单标签应该做的，但不能把它出于某种原因）。

该角引导指令，在那里不包括造型。

The Angular-Bootstrap directives out there don't cover styling.

推荐答案

使用引导的错误类造型。你可以少写code。

Use Bootstrap's "error" class for styling. You can write less code.

<form name="myForm">
  <div class="control-group" ng-class="{error: myForm.name.$invalid}">
    <label>Name</label>
    <input type="text" name="name" ng-model="project.name" required>
    <span ng-show="myForm.name.$error.required" class="help-inline">
        Required</span>
  </div>
</form>

编辑：
至于其他的答案和评论指出 - 在引导3类目前是有错误，而不是错误

As other answers and comments point out - in Bootstrap 3 the class is now "has-error", not "error".

这篇关于调和Angular.js和Bootstrap表单验证造型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！