Automatic Bootstrap validation based on ngModel
0 people use it
Submitted by: 139790?v=3 8bitDesigner


ngFormGroup applies Bootstrap validation classes based on ngModel's validity.


In your Angular project, run bower install --save ng-form-group to save the module. Then, in your HTML, add:

And lastly, in your Angular module, include ng-form-group as a dependency:


Just mark up your form as recommended by Bootstrap and any fields with the class form-group will be automatically validated!

Now, when your model is invalided, by someone entering an invalid email address, the has-error class will be added to your form-group.

Validation in action

If you want to disable feedback for a specific form, add the form-group-without-feedback class to the form-group:

Bonus round: Feedback icons!

Just add the .has-feedback class to your form group, and we'll automatically add bootstrap style Feedback icons to your form fields.

Validation in action


To get your dev environment up and running, run npm install and bower install to get the components we need.

Tests are run with npm run test and you can build the minified source with npm run build.

Releases are built using npm run release:[type]. So, to generate a new patch release, run npm run release:patch. This script will:

  • Generate minified, concatenated JS files,
  • Increment the version in package.json and bower.json
  • Tag a new release
comments powered by Disqus
This page was last updated over 3 years ago.