如何基于AngularJS输入类设置Twitter Bootstrap class = error = ng-invalid？

Question

我有一个问题,我的CSS没有生效(在Chrome中),我认为与Twitter Bootstrap存在一些冲突.

input.ng-invalid {
    border-color: red;
    outline-color: red;
}

我的模式在我的控制器中定义为:

$scope.hexPattern = /^[0-9A-Fa-f]+$/;

然后复制活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>

我在Twitter Bootstrap Base CSS 的Forms部分的"Validation states"部分看到,我看到我需要将该error类添加到control-group div.

<div class="control-group error">

问题: 如何class=error基于子输入设置class=ng-invalid？这可以通过一些软ng表达式来完成吗？我可以通过控制器中的代码设置吗？有没有办法".$ watch"模式评估,如属性变化？获得"红色"轮廓的任何其他想法？

Answer 1

您可以使用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

编辑

使用bootstrap 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>

http://plnkr.co/edit/5JNCrY8yQmcnA9ysC7Vc?p=preview

Answer 2

我认为更好的解决方案是添加自己的CSS规则.它使代码更简单,作为奖励,您可以将规则设置为仅适用于"脏"元素.这样,字段只会在用户尝试输入内容后突出显示.

在我的应用程序中,我刚刚根据AngularJS表单文档中的示例添加了此css .

/* Forms */
.ng-invalid.ng-dirty {
  border-color: red;
  outline-color: red;
}
.ng-valid.ng-dirty {
  border-color: green;
  outline-color: green;
}