Monday, 25 July 2016

AngularJs display validation messages for input controls.

In this post I have used the angularJs library named "angular-messages.min.js". This helps us to display all the validations error messages like minlength, maxlength and required etc.


Step 1: Downloag angular-messages.min.js file and refrence it in your main view.
<script src="Scripts/angular-messages.min.js"></script>

Step 2: Inject "ngMessages" in your app.js file. 
var myApp = angular.module("myApp", ["ngRoute", "ngStorage", "ngMessages"]);

Step 3: Now add following html in your html view where you want to display the velidation messages for html controls.
<div ng-messages="formName.inputControlName.$error" style="color:maroon">
      <div ng-message="required">You did not enter a field</div>
      <div ng-message="minlength">Your field is too short</div>
      <div ng-message="maxlength">Your field is too long</div>
</div>

No comments:

Post a Comment