AngularJS Validation In MVC - Part Three

Before starting the third part I recommend that you please go through the previous parts on AngularJS Validation:

1. Apply CSS to validation message
2. Disable or enable the button depending on validation message
3. Change the color of controls as per validation

Initial requirement is reference

1. Apply CSS to validation message
   
   i. Below CSS will help you to apply css to the validation message,
   
   1. .ValidationMessage {
   2. color: red;
   3. font-size: x-small;
   4. }
   And to the control of message apply below way,
   
1. <span class="ValidationMessage" ng-show="myForm.email.$dirty && myForm.email.$invalid">
2. <br />
3. <span ng-show="myForm.email.$error.required">Email is required.</span>
4. <span ng-show="myForm.email.$error.email">Invalid email address.</span>
5. </span>
   
   
2. Disable or enable the save button depending on validation
   
   By below way you can enable / disable the save button control on validation,
   
   1. <button ng-disabled="myForm.$invalid">Save</button>
3. Change the controls as per validation.
   
   For Invalid control CSS is,
   
   1. input.ng-invalid {
   2. background-color: pink;
   3. }
   For valid control CSS is,
   
   1. input.ng-valid {
   2. background-color: lightgreen;
   3. }

My final code will look like as below,