In this 22nd day of AngularJS article series, we are going to be learning next key players/concept of AngularJS, understanding the concept of ngMessage directive of AngularJS. Before moving to key players/concepts of AngularJS, please read my previous articles:

Introduction

In AngularJS – 1.3 defines new directive for us that is ‘ngMessage’. This directive is used for displaying messages or error messages to user. This messages are displayed order as they are listed. This directive is specially designed to show and hide messages based on their state.

A remote template or custom error message is also used for message reusability and messages can be overridden. It can be used in the following ways:

  1. As an attribute directive.

    <!-- attribute-style usage -->
    <div ng-messages="empForm.email.$error">...</div>

  2. As an element directive.

    <!-- element-style usage -->
    <ng-messages for="empForm.email.$error">...</ng-messages>

Following are the list of directives added by AngularJS as follows, we are going to learn one by one:

ng-messages

This directive is designed to show and hide messages based on their states. It uses the ‘$error’ object for the states.

ng-message

This directive is used to show and hide particular messages. It determines which messages are visible or shown base on the state provided by ngMessages.

ng-message-include

This directive defines itself, means include other remote message on proper place. It is place in ngMessages directive container. Using this directive you can reuse the previously defined messages and you can override also that messages.

ng-message-exp

This directive works the same as ngMessage directive. You can show and hide messages with the help of passing expression to this message.

Steps to use this directive in your applications:

  1. Download or used CDN path of ‘angular.messages.js’ file in your application as follows:
    1. <script src="app/angular.min.js"></script>
    2. <script src="app/angular-messages.js"></script>
  2. Inject the ‘ngMessages’ module in your main module as follows:
    1. var app = angular.module('mainApp', ['ngMessages']);

Example:

In the following example we are going to see how we can use this directive to showing form validation messages as follows:

app.js

  1. /*Angular Modules take a name, best practice is lowerCamelCase, and a list of dependancies*/
  2. var app = angular.module('mainApp', ['ngMessages']);
  4. //Creating controller in general
  5. app.controller('SimpleCtrl', function ($scope) {
  6. $scope.name = 'Jeetendra Gund';
  7. });
Index.html
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml" ng-app="mainApp">
  3. <head>
  4. <title>Welcome to C# Corner</title>
  5. <script src="app/angular.min.js"></script>
  6. <script src="app/angular-messages.js"></script>
  7. <script src="app/mainApp.js"></script>
  8. </head>
  9. <body>
  10. <form name="jeetForm">
  11. <h2>ngMessage Directive of AngularJS</h2>
  12. <b2>Enter Name:</b2>
  13. <input type="text" ng-model="name" name="name" required ng-maxlength="15" ng-minlength="5" />
  14. <br />
  15. <div ng-messages="jeetForm.name.$error">
  16. <div ng-message="required"><br />Please enter the Name.</div>
  17. <div ng-message="maxlength"><br />Name is too long.</div>
  18. <div ng-message="minlength"><br />Name must be 3 characters long.</div>
  19. </div>
  20. </form>
  21. </body>
  22. </html>
In the above example we use three validation for entered text by user:
  1. Required
  2. Minlength
  3. Maxlength

Output:

Output

The above output you can see first validation the ‘required’, because we didn’t enter a text yet.

Output

The above output you can see another validation for the ‘minlength’, because we just enter a single character.

Output

The above output you can see another validation for the ‘maxlength’.

Reusing Messages

The name defines itself as reusing previously defined messages to avoid repetition of message in form validation. For that we used ‘ng-message-include’ directive as follows:

Syntax:

code

In the above screen shot you can see we created a ‘ng-template’ for messages and gives the id ‘error-messages’ and that id will be used in ‘ng-messages-include’ directive.

Example:

App.js

  1. /*Angular Modules take a name, best practice is lowerCamelCase, and a list of dependancies*/
  2. var app = angular.module('mainApp', ['ngMessages']);
  4. //Creating controller in general
  5. app.controller('SimpleCtrl', function ($scope) {
  6. $scope.name = 'Jeetendra Gund';
  7. });
ng-message-include.html
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml" ng-app="mainApp">
  3. <head>
  4. <title>Welcome to C# Corner</title>
  5. <script src="app/angular.min.js"></script>
  6. <script src="app/angular-messages.js"></script>
  7. <script src="app/mainApp.js"></script>
  8. </head>
  9. <body>
  10. <form name="jeetForm">
  11. <h2>ng-messages-include Directive of AngularJS</h2>
  12. <b2>Enter Name:</b2>
  13. <input type="text" ng-model="name" name="name" required ng-maxlength="15" ng-minlength="5" />
  14. <br />
  15. <div ng-messages="jeetForm.name.$error">
  16. <div ng-messages-include="error-messages"></div>
  17. </div>
  18. </form>
  19. <script type="text/ng-template" id="error-messages">
  20. <div ng-message="required"><br />Please enter the Name.</div>
  21. <div ng-message="maxlength"><br />Name is too long.</div>
  22. <div ng-message="minlength"><br />Name must be 3 characters long.</div>
  23. </script>
  24. </body>
  25. </html>
Output:

Output

The above output you can see first validation the ‘required’, because we didn’t enter a text yet.

Output

The above output you can see another validation for the ‘minlength’, because we just enter a single character.

Output

The above output you can see another validation for the ‘maxlength’.

Dynamic Messages

For showing dynamic messages based on the expression, AngularJS provides the ‘ng-message-exp’ directive. This directive can be used with the help of ‘ng-messages’ contain as follows:

code

The above screen shot you can see, how we can use ‘ng-message-exp’ directive for displaying form validation messages.

Example:

Output

The above output you can see first validation the ‘required’, because we didn’t enter a text yet.

Output

The above output you can see another validation for the ‘minlength’, because we just enter a single character.

Output

The above output you can see another validation for the ‘maxlength’.

Great, ngMessage directive of AngularJS with example created successfully!

Summary

I hope that beginners as well as students understand the concept of ngMessage directive in AngularJS with Example. If you have any suggestions regarding this article, then please contact me. Stay tuned for other concepts of AngularJS coming soon.