The AngularJS ng-Messages
directive is used to show and hide multiple messages based on the state of a key/value object that it listens on.
In order to use ng-Message directive, you need to include below supported files in your HTML page: <script src="angular.js"> <script src="angular-messages.js">
Syntax
<div ng-messages="myForm.myField.$error" role="alert"> <div ng-message="required">You did not enter field value</div> <div ng-message="minlength">Field is too short</div> <div ng-message="maxlength">Field is too long</div> </div>
<!DOCTYPE html> <html> <head> <!-- www.techstrikers.com --> <title>AngularJS ngMessages Sample</title> <script src="https://www.techstrikers.com/AngularJS/Includes/angular.min.js"></script> <script src="https://www.techstrikers.com/AngularJS/Includes/angular-messages.js"></script> <script type="text/javascript"> (function(angular) { 'use strict'; angular.module('ngMessagesExample', ['ngMessages']); })(window.angular); </script> </head> <fieldset style="background-color:#DDE4E9;"> <legend>AngulerJS ngMessages Example</legend> <body ng-app="ngMessagesExample"> <form name="myForm"> <div style="font-family:Arial;margin:10px;width:350px;"> <label>Enter first name:</label> <input type="text" name="firstName" ng-model="name1" required minlength="5" maxlength="20"/><br> <label>Enter last name:</label> <input type="text" name="lastName" ng-model="name2" required minlength="5" maxlength="20"/><br/><br/> </div> <div ng-messages="myForm.firstName.$error" role="alert"> <div style="font-family:Arial;color:red;background:steelblue;padding:3px;width:350px;" ng-message="required">You did not enter first name</div> <div style="font-family:Arial;color:red;background:steelblue;padding:3px;width:350px;" ng-message="minlength">First name is too short</div> <div style="font-family:Arial;color:red;background:steelblue;padding:3px;width:350px;" ng-message="maxlength">First name is too long</div> </div> <div ng-messages="myForm.lastName.$error" role="alert"> <div style="font-family:Arial;color:red;background:steelblue;padding:3px;width:350px;" ng-message="required">You did not enter last name</div> <div style="font-family:Arial;color:red;background:steelblue;padding:3px;width:350px;" ng-message="minlength">Last name is too short</div> <div style="font-family:Arial;color:red;background:steelblue;padding:3px;width:350px;" ng-message="maxlength">Last name is too long</div> </div> </form> </fieldset> </body> </html>See Live Example