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部分的“验证状态”部分看到，我看到我需要将error类添加到控制组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规则。它使代码更简单，作为奖励，您可以将规则设置为仅适用于“脏”元素。这样，只有在用户尝试输入内容后才会突出显示字段。

在我的应用程序中，我刚刚根据the AngularJS forms documentation中的示例添加了此css。

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

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

2 个答案: