Html 如何根据 AngularJS 输入 class=ng-invalid 设置 Twitter Bootstrap class=error？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15859011/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set Twitter Bootstrap class=error based on AngularJS input class=ng-invalid?
提问by Kevin Hakanson
I have a problem where my CSS is not taking effect (in Chrome), and I think there is some conflict with Twitter Bootstrap.
我有一个问题，我的 CSS 没有生效（在 Chrome 中），我认为与 Twitter Bootstrap 存在一些冲突。
input.ng-invalid {
border-color: red;
outline-color: red;
}
My pattern is defined in my controller as:
我的模式在我的控制器中定义为：
$scope.hexPattern = /^[0-9A-Fa-f]+$/;
And copying the HTML from the live DOM, I see that both ng-invalidand ng-invalid-patternare set, so my ng-patternmust be working.
从实时 DOM 中复制 HTML，我看到ng-invalid和ng-invalid-pattern都已设置，所以我ng-pattern必须工作。
<div class="control-group">
<label class="control-label" for="salt">Salt: </label>
<div class="controls">
<input type="text" id="salt" ng-model="salt" ng-pattern="hexPattern" class="ng-dirty ng-invalid ng-invalid-pattern">
</div>
</div>
I see that in the "Validation states" section of the Formssection of Twitter Bootstrap Base CSS, I see I need to add the errorclass to the control-group div.
我看到在Twitter Bootstrap Base CSS的“表单”部分的“验证状态”部分中，我看到我需要将该error类添加到控制组 div。
<div class="control-group error">
Question:How to set the class=errorbased on the child input class=ng-invalid? Can this be done with some soft of ng-class expression? Can I set this via code in the controller? Is there a way to ".$watch" the pattern evaluation like property changes? Any other ideas to get my "red" outline?
问题：如何class=error根据子输入设置class=ng-invalid？这可以用一些软的 ng-class 表达来完成吗？我可以通过控制器中的代码设置它吗？有没有办法“.$watch”像属性变化这样的模式评估？任何其他想法来获得我的“红色”轮廓？
回答by Artem
You can easily do it with ng-classdirective:
您可以使用ng-class指令轻松完成：
<form name="myForm">
<div class="control-group" ng-class="{ error: myForm.salt.$invalid }">
<label class="control-label" for="salt">Salt: </label>
<div class="controls">
<input type="text" name="salt" ng-model="salt" ng-pattern="hexPattern">
</div>
</div>
</form>
http://plnkr.co/edit/RihsxA?p=preview
http://plnkr.co/edit/RihsxA?p=preview
EDIT
编辑
Example with bootstrap 3.3.5 and angular 1.4.2:
引导程序 3.3.5 和 angular 1.4.2 的示例：
<form name="myForm">
<div class="form-group" ng-class="{ 'has-error': myForm.salt.$invalid }">
<label class="control-label" for="salt">Salt: </label>
<input class="form-control" type="text" name="salt" ng-model="salt" ng-pattern="hexPattern">
</div>
</form>
回答by kzar
I think a better solution is to just add your own CSS rules. It makes the code much simpler and, as a bonus, you can set the rule to only apply to "dirty" elements. That way fields will only be highlighted after the user has tried to enter something.
我认为更好的解决方案是添加您自己的 CSS 规则。它使代码更简单，作为奖励，您可以将规则设置为仅适用于“脏”元素。这样字段只会在用户尝试输入内容后突出显示。
In my application I've just added this css, based on an example in the AngularJS forms documentation.
在我的应用程序中，我刚刚根据AngularJS 表单文档中的示例添加了这个 css 。
/* Forms */
.ng-invalid.ng-dirty {
border-color: red;
outline-color: red;
}
.ng-valid.ng-dirty {
border-color: green;
outline-color: green;
}
