为什么日期选择器在angularjs +引导程序中不显示红色边框？

Question

我正在使用带有bootstrap的angularjs。我在表单中有一个无效字段。当无效时（文本变为红色），我需要将其边框设为红色。bootstrap.has-error中有一个类

http://getbootstrap.com/docs/3.3/css/#callout-form-validation-state-accessibility

这是我的代码 http://plnkr.co/edit/neixp9ZARRAQ33gKSV9u?p=preview

我的字段无效，但是边框不是红色，文本也不是红色，为什么？

Answer 1

您尚未定义该字段无效时应该发生的任何地方。

当字段不正确时，Angular将添加类“ ng-invalid”，因此，当输入不正确时，您可以将此代码添加到CSS中以获得红色边框：

.form-control.ng-invalid {
    border: 1px solid red;
}

Answer 2

您需要在范围内更改类，将text-danger替换为help-block。引导程序中的类引用了无效字段。

<span id="" ng-if="userForm[key].$invalid" class="text-danger" style="margin-bottom:0">Invalid date </span>