相关疑难解决方法(0)

协调Angular.js和Bootstrap表单验证样式

我正在使用Angular和Bootstrap.以下是供参考的代码:

<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>
Run Code Online (Sandbox Code Playgroud)

Bootstrap具有无效字段的样式,形式为input:invalid {.... }; 当田地空无一人时,这些就开始了.现在我也通过Angular进行了一些模式匹配.当":invalid"关闭但是".ng-invalid"打开时,这会产生奇怪的情况,这需要我为".ng-invalid"类重新实现bootstrap CSS类.

我看到两种选择,但两者都有问题

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

Angular-Bootstrap指令不包括样式.

twitter-bootstrap angularjs

72
推荐指数
6
解决办法
6万
查看次数

标签 统计

angularjs ×1

twitter-bootstrap ×1