AngularJS ng-Messages Directive

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>

AngularJS ng-Messages Directive Example

<!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

« Previous

AngularJS Code Examples

AngularJS Live Demo

ASP.NET Code Examples

Javascript Code Examples

Interview Q & A

Google MAP API Live Demo

Google MAP API Code Examples

Utility Tools

Articles

Angularjs Tutorials

Angularjs References

Angularjs Examples

AngularJS ng-Messages Directive

AngularJS ng-Messages Directive Example

Recent Articles