如何在 Angular 5 自定义验证中使用 Bootstrap 4 验证伪类（：valid、：invalid）？答案

【问题标题】：How to use Bootstrap 4 validation pseudo-classes (:valid, :invalid) with Angular 5 custom validations?如何在 Angular 5 自定义验证中使用 Bootstrap 4 验证伪类（：valid、：invalid）？
【发布时间】：2018-07-05 04:45:15
【问题描述】：

Bootstrap 4 验证样式基于 form-control:valid 或 form-control:invalid。 Angular 提供了在字段出错时添加任何自定义类的可能性。

如果我遵循规范： https://getbootstrap.com/docs/4.0/components/forms/#validation

我还可以将.form-control.is-invalid 类添加到我的input 元素中。但是，使用具有此策略的自定义验证器会产生一些合并的结果； form-control is-invalid :valid

这似乎更加重视:valid，这表明我的元素显示为有效，但相关的invalid-feedback 似乎还可以！

我有点迷路了。

编辑

这是一个演示插件： https://plnkr.co/edit/0kxGpRz3JY3ixJbYqRZr?p=preview

【问题讨论】：

标签： angular twitter-bootstrap bootstrap-4 angular-validation

【解决方案1】：

您的演示运行良好，这里唯一的问题是类名和样式

您需要从form 标签中删除was-validated 类并保持如下：

class="needs-validation"

WORKING DEMO

【讨论】：