This plugin integrates form validation in AngularJS and Bootstrap 4 by extending form and ng-model directives.
It also provides a custom CSS file that removes default browser box-shadow from invalid form controls in validated forms.
Use novalidate html5 directive on form element if you want to disable it's validation.

This plugin also provides a set of additional validators and can be easily internationalized.

All validation errors are added automatically to all elements with ng-model directive that are contained in form element.
Validation errors are displayed upon form submission or input change.
Also, you can reset form validation state using {formName}.resetValidation() method.
@
Form submitted successfully!
You can use 'invalid-tooltip' instead of 'invalid-feedback' by using the validate-mode directive on form element.
Default validate-mode can be changed in validateProvider.
@
Form submitted successfully!
You can change default error message by using the {validateDirective}-error-msg.
E.g. required-error-message="custom text" or min-error-message="custom text"
This plugin provides a set of custom validators which are available by adding a directive to desired form control (eg. <input type="text" ng-model="..." validate-url/>).
validate-url and validate-host can also be added to an <textarea> element and validate it contents line by line.
validate-custom allows one to provide a callback, which accepts a value parameter and returns a bool results indicating it's validation status.
All default error messages can be configured in validateProvider.
You can also include a language file from dist/i18n/ directory to change default (english) language.
So far only english and polish languages are available.
This plugin supports a input group validation workaround by adding rounded-right css class to the last non-feedback child element of input-group.
You can disable this fix in validateProvider by setting inputGroupFix to false.
Without fix
@
With fix
@
Custom form controls (eg. angularJS components) are supported via provided CSS file that utilizes angularJS .ng-invalid/.ng-valid classes.
Invalid feedback
Valid feedback
Invalid feedback
Valid feedback
Invalid feedback
Valid feedback
Invalid feedback
Valid feedback
Invalid feedback
Invalid feedback
Valid feedback
Invalid feedback
Valid feedback
Invalid feedback
Valid feedback
Support for ng-form directive (nested forms)
@