A Closer Look at Angular’s ngMessages Module

This article was peer reviewed by Marc Towler and Stephan Max. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

Because of its ability to help developers craft better user experiences when building forms, the ngMessages module became a core directive with the release of Angular 1.3. One year later, the Angular team has continued to develop this module to ensure it provides developers with the ability to display error messages using templates, add animations to error messages, and more. In late August, I published an article about using the ngMessages module to perform basic form validation. That article showed the basics of how this module worked, while this article aims to explore some of the different functionality that ngMessages grants us access to.

The ngMessages Module

When added to an Angular application, the ngMessages API grants users to the following Directives for controlling error messages:

• ngMessages
• ngMessage
• ngMessagesInclude
• ngMessageExp

Throughout this article, we are going to take a look at each of these directives in order to gain a firm understanding of how they work, and why they are helpful.

The Basics of ng-message and ng-messages

Let’s take a look at the role the ng-message and ng-messages directives play in displaying error messages.

See the Pen ngMessages Ex 1 by SitePoint (@SitePoint) on CodePen.

Above we see some code for validating a basic textarea html element. In order for ngMessages to work, it relies on ng-model’s $error object to tell the application whether the input passes validation or not. Once the user clicks away from the box, ngMessages will then render error fields accordingly. In the example above, ng-model is present inside of an input tag with the name of userInput. As a result of this, ng-messages knows to look in for information about our input field. In this example, ng-messages will render messages according to the ng-minlength, ng-maxlength, and required attributes. It is important to note that Angular will display these error messages in the order in which they appear in our html.

Quick Note on Using ngMessages with ngIf

In order to hide these error messages from showing up automatically, we can make use of ngIf. When used, the ng-if directive removes or recreates a section of the DOM depending on different circumstances..

By checking out the example below, we see that the code is similar to the first example, however ng-if has been appended on to our parent ng-messages div. Inside this ng-if statement, we can pass in the value of $dirty to display error messages while a user is interacting with the input field. Having said that, we can see our error messages being rendered as we type in the text-area below, which is all thanks to the ng-if directive.

See the Pen ngMessages Ex 2 by SitePoint (@SitePoint) on CodePen.

ngMessagesInclude

The Angular team places a heavy focus on allowing developers to build maintainable, modular web applications. They want you to keep your code as D.R.Y. as possible, and this is extremely evident when using the ngMessagesInclude directive. When implemented in an Angular application, the ng-messages-include directive allows developers to re-use custom message templates. Initially, ngMessagesInclude was to be used as a supplementary attribute on the parent ng-messages directive, however this changed in the release of 1.4. Now, ngMessagesInclude is its own directive which is to be used as a child of the ng-messages directive, just like the ng-message directive we saw in the first example.

Reusing Templates

Below, we see an example of how this directive allows us to display a number of error messages. Instead of having to write out multiple child ng-message directives, ng-messages-include allows us to pass a template of messages in with one line of code. In order to do this, all we have to do is pass the id of this message template into this directive for it to work.

See the Pen ngMessagesInclude by SitePoint (@SitePoint) on CodePen.

Overwriting Error Messages

The ng-messages-include directive can also be used in conjunction with ng-message to provide solutions for minor tweaks to error messages. In the example below, we see that both of these directives are present. If we interact with the form, we see ng-message is being used to override the minlength message defined inside of the message-template.

See the Pen ngMessages Overwrite Example by SitePoint (@SitePoint) on CodePen.

As a result of this, developers don’t have to worry about running into problems when faced with situations in which they may need to modify the output of an error message for a given field. In the example above, the minlength message is shaped around the question more, and this shows an instance of how this is helpful. Additionally, what is important to note is the order of ng-message and ng-messages-include. If ng-message is not defined first, it will not overwrite the message inside the template.

ngMessagesExp

Next, let’s take a look at the ng-messages-exp directive which was released in Angular 1.4. When implemented inside of an ng-messages container, developers can use this directive to display error messages dynamically using expressions. This is extremely powerful, as it allows developers to do things such as display messages asynchronously depending on the response of the server. For the sake of this tutorial however, the example we are going look at will strictly deal with client side code.

See the Pen ngMessagesExp by SitePoint (@SitePoint) on CodePen.

In the example above, we see a text-area extremely similar to the examples we have looked at thus far, however our html code is somewhat different. This example combines ng-repeat with ng-message-exp to display error messages set using $scope.messages depending on the input value. By taking a look at this example, we see that ng-repeat is being used to iterate through the data passed into the messages property. Now, when a user fills out the form, ng-messages-exp will look through this property to match the correct expression, and display its descriptions. If we take a look inside our code, we see that both minlength, and maxlength have been passed in our second object in the messages property. As a result of this, ng-messages-exp will know to evaluate both of these values, and display this error message dynamically. Although this is quite basic, it shows how many doors the use of ng-message-exp opens to developers as it will perform logic for us, and provides a solid example of how powerful of a tool this directive is.

Final Words

And thus concludes my article on ngMessages, and the substantial impact it has had on the development of Angular applications. If one thing is for certain, it is that ngMessages is going to continue to play a huge role in the Angular framework, so I sincerely hope that you have gained some insight regarding how this technology works. As always, feel free to reach out if you have any questions, as I would be more than happy to help you in anyway possible!

Frequently Asked Questions about Angular’s ngMessages Module