How to use Bootstrap 4 validation pseudo-classes (:valid, :invalid) with Angular 5 custom validations?
Your demo is working perfectly fine , Only issue here is with class name and style
You need to remove was-validated class from the form tag and keep it as below :
class="needs-validation"