Example 1: This one is just like the previous example except that we've specified a stylesheet for the page so that the ng-valid, ng-invalid, ng-dirty, and ng-pristine classes which AngularJS automatically puts on form controls will actually style the controls and give the user feedback.

In addition to ng-valid, ng-invalid, ng-dirty, and ng-pristine which are all put on the controls as they are changed, the same classes are also put on the form element as well. So you can style your form as a whole to show that one or more controls are not valid or the user has made a change to some data, etc. On top of that, there are also additional ng-valid-pattern, ng-invalid-pattern, ng-valid-required, and ng-invalid-required styles as well that appear and disappear based upon the specific data requirements of the fields. So you can do a lot of styling just using the provided styles.

This warning only appears because the form now has the ng-invalid class.


Example 2: I didn't bother putting together a full form for this one, just a single field to demonstrate Bootstrap's styling for control groups. It applies the error class to the control group whenever the $invalid flag for a particular field is set. Note: For this to work, you must have added a name to the form and a name to the control as well. With both in place AngularJS will create a structure in the $scope with flags which can be tested to enable and disable buttons or even change the validation of other controls (for example, if one control is only required if certain checkbox is selected). The flags associated with a form give you the next level of sophistication to your validation beyond what can be done with the AngularJS CSS classes alone.

Note: Bootstrap has error, warning, info, and success styles which may be applied to control groups so you're not just limited to error.

Something may have gone wrong