如何使用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"

工作演示