Before starting the fifth part I recommend that you please go through the below parts.
This part will teach you how to,
- How to display validation summary using AngularJS
Initial requirement is reference,
- <script src="~/Scripts/angular.js"></script>
- Add validation Summary Div in you project at location where you want to show the summary box.
- <div ng-show="myForm.$invalid">
- < div >
- Remove all the control level validations add it in summary box as below,
- <div ng-show="myForm.$invalid">
- <ul> <span class="ValidationMessage" ng-show="myForm.StudentRollNumber.$dirty && myForm.StudentRollNumber.$invalid">
- <li ng-show="myForm.StudentRollNumber.$error.required">Student Roll Number is required.</li>
- <li ng-show="myForm.StudentRollNumber.$error.number">Not valid number!</li>
- </span> <span class="ValidationMessage" ng-show="myForm.Student.$dirty && myForm.Student.$invalid">
- <li ng-show="myForm.Student.$error.required">Student Name is required.</li>
- </span> <span class="ValidationMessage" ng-show="myForm.BirthDate.$dirty && myForm.BirthDate.$invalid">
- <li ng-show="myForm.BirthDate.$error.required">Student Birth Date is required.</li>
- <li ng-show="myForm.BirthDate.$error.date">Not a Valid Date.</li>
- </span> <span class="ValidationMessage" ng-show="myForm.email.$dirty && myForm.email.$invalid">
- <li ng-show="myForm.email.$error.required">Email is required.</li>
- <li ng-show="myForm.email.$error.email">Invalid email address.</li>
- </span> <span class="ValidationMessage" ng-show="myForm.marks.$dirty && myForm.marks.$invalid">
- <li ng-show="myForm.marks.$error.required">Email is required.</li>
- <li ng-show="myForm.marks.$error.number">Invalid number.</li>
- <li ng-show="myForm.marks.$error.max">Max Percentage is 100.</li>
- </span> </ul>
- </div>
- Now Demo project 4 will be modified inthe below way hence my final code is as below,
- Run the project you will find in the application as below,
Hope you will enjoy displaying validation summary box.