Menu
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.
Here's a demo plunker: https://plnkr.co/edit/0kxGpRz3JY3ixJbYqRZr?p=preview
613
Here's how form validation works with Bootstrap: HTML form validation is applied via CSS's two pseudo-classes, :invalid and :valid . It applies to <input> , <select> , and <textarea> elements. Bootstrap scopes the :invalid and :valid styles to parent .was-validated class, usually applied to the <form> .
1. Required attribute: If you want to make an input mandatory to be entered by the user, you can use the required attribute. This attribute can be used with any input type such as email, URL, text, file, password, checkbox, radio, etc. This can help to make any input field mandatory.
Bootstrapping Validation is a way to predict the fit of a model to a hypothetical testing set when an explicit testing set is not available.
This is pretty useful in giving a visual indication to the user when a form field is required. There will now be a nice little “*” after the label for “Required Field”.
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
198
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
