如何使用Angular 5自定义验证的Bootstrap 4验证伪类（：valid，：invalid）？

Question

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

Answer 1

你的演示工作非常好，这里唯一的问题是课程名称和风格

您需要从was-validated标记中删除form类，并将其保留如下：

class="needs-validation"

<强> WORKING DEMO