为什么日期选择器在 angularjs + bootstrap 中没有显示红色边框？答案

【问题标题】：why date picker not showing red border in angularjs + bootstrap?为什么日期选择器在 angularjs + bootstrap 中没有显示红色边框？
【发布时间】：2019-04-13 03:29:22
【问题描述】：

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

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

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

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

【问题讨论】：

寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定的问题或错误以及重现它所需的最短代码问题本身。请参阅：如何创建minimal reproducible example。

标签： javascript angularjs twitter-bootstrap angular-ui-bootstrap

【解决方案1】：

您尚未在任何地方定义当该字段无效时应该发生什么。

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：