协调 Angular.js 和 Bootstrap 表单验证样式 [英] Reconcile Angular.js and Bootstrap form validation styling

问题描述

我在 Bootstrap 中使用 Angular.下面是代码供参考:

<input type="text" class="input" ng-model="newUser.uname" placeholder="Twitter" ng-pattern="/^@[A-Za-z0-9_]{1,15}$/" 必需的></td><button type="submit" ng-disabled="newUserForm.$invalid" class="btn btn-add btn-primary">添加</button></表单>

Bootstrap 具有无效字段的样式，格式为 input:invalid {.... };当字段为空时，它们就会启动.现在我还通过 Angular 进行了一些模式匹配.当:invalid"关闭但.ng-invalid"打开时，这会产生奇怪的情况，这需要我为.ng-invalid"类重新实现引导CSS类.

我看到了两个选项，但都遇到了问题

• 让 Angular 使用一些自定义类名而不是ng-valid"(我不知道该怎么做).
• 禁用 html5 验证(我认为这就是表单标签中的novalidate"属性应该做的，但由于某种原因无法使其工作).

那里的 Angular-Bootstrap 指令不包括样式.

解决方案

使用 Bootstrap 的错误"类进行样式设置.您可以编写更少的代码.

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

</表单>

正如其他答案和评论指出的那样 - 在 Bootstrap 3 中，该类现在是有错误"，而不是错误".

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>

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

• Make Angular use some custom classname instead of "ng-valid" (I don't know how to do this).
• Disable html5 validation (I thought that that's what "novalidate" attribute in the form tag should do, but couldn't get it work for some reason).

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

解决方案

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>

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

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