CODEWITHSUNDEEP
angulartwitter-bootstrapbootstrap-4angular-validation
JSlain
JSlain

Reputation: 576

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

Bootstrap 4 validation styles are based on form-control:valid or form-control:invalid. Angular offers the possibility to add any custom class when a field is in error.

If i follow the spec: https://getbootstrap.com/docs/4.0/components/forms/#validation

I can also add .form-control.is-invalid class to my input element. However, using a custom validator with this strategy gives i kinda merged results; form-control is-invalid :valid

That seems to give more importance to :valid, which show my element to be shown as valid, but the related invalid-feedback is appearing okay!

I'm kinda lost.

EDIT

Here's a demo plunker: https://plnkr.co/edit/0kxGpRz3JY3ixJbYqRZr?p=preview

Upvotes: 12

Views: 4979

Answers (1)

Vivek Doshi
Vivek Doshi

Reputation: 58533

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"

WORKING DEMO

Upvotes: 5

Related Questions