19

我有一个问题，我的 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 的表单部分的“验证状态”部分中，我看到我需要将该error类添加到控制组 div。

<div class="control-group error">

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

4

2 回答 2

41

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

编辑

引导程序 3.3.5 和角度 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

于 2013-04-07T06:53:17.637 回答
9

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

在我的应用程序中，我刚刚添加了这个 css，基于AngularJS 表单文档中的示例。

/* Forms */
.ng-invalid.ng-dirty {
  border-color: red;
  outline-color: red;
}
.ng-valid.ng-dirty {
  border-color: green;
  outline-color: green;
}
于 2013-09-20T12:30:12.923 回答