协调Angular.js和引导表单验证样式
协调Angular.js和引导表单验证样式
提问于 2013-01-16 06:48:47
我正在使用带Bootstrap的Angular。下面是供参考的代码：
<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具有input:invalid {.... }形式的无效字段样式；这些样式在字段为空时生效。现在我也有一些通过Angular的模式匹配。当":invalid“被关闭，而".ng-invalid”被打开时，这会产生一些奇怪的情况，这将要求我为".ng-invalid“类重新实现引导CSS类。
我看到了两个选择，但这两个都有问题
- 使Angular使用一些自定义的类名而不是"ng-valid“(我不知道怎么做)。
- 禁用了html5验证(我认为这是表单标记中的"novalidate”属性应该做的事情，但由于某种原因无法让它工作)。
Angular-Bootstrap指令没有涵盖样式。
回答 12
Stack Overflow用户
回答已采纳
发布于 2013-02-19 17:08:13
使用Bootstrap的"error“类设置样式。你可以写更少的代码。
<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>编辑：正如其他答案和评论指出的那样-在Bootstrap 3中，类现在是"has-error"，而不是"error“。
Stack Overflow用户
发布于 2013-06-26 04:22:23
Bootstrap 3中的类已更改：
<form class="form-horizontal" name="form" novalidate ng-submit="submit()" action="/login" method="post">
<div class="row" ng-class="{'has-error': form.email.$invalid, 'has-success': !form.email.$invalid}">
<label for="email" class="control-label">email:</label>
<div class="col">
<input type="email" id="email" placeholder="email" name="email" ng-model="email" required>
<p class="help-block error" ng-show="form.email.$dirty && form.email.$error.required">please enter your email</p>
<p class="help-block error" ng-show="form.email.$error.email">please enter a valid email</p>
...请注意'has-error'和'has-success'周围的引号:花了一段时间才找到...
Stack Overflow用户
发布于 2014-02-13 05:20:11
另一种解决方案是: Create指令，它根据子输入切换has-error类。
app.directive('bsHasError', [function() {
return {
restrict: "A",
link: function(scope, element, attrs, ctrl) {
var input = element.find('input[ng-model]');
if (input.length) {
scope.$watch(function() {
return input.hasClass('ng-invalid');
}, function(isInvalid) {
element.toggleClass('has-error', isInvalid);
});
}
}
};
}]);然后在模板中简单地使用它
<div class="form-group" bs-has-error>
<input class="form-control" ng-model="foo" ng-pattern="/.../"/>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14348384
复制相关文章
相似问题