如何将 Bootstrap 4 验证伪 类 (:valid, :invalid) 与 Angular 5 自定义验证一起使用？

How to use Bootstrap 4 validation pseudo-classes (:valid, :invalid) with Angular 5 custom validations?

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

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

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

这似乎更重视 :valid，这表明我的元素显示为有效，但相关的 invalid-feedback 看起来还不错！

我有点迷路了。

编辑

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

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

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

class="needs-validation"

WORKING DEMO