A Closer Look at Angular’s ngMessages Module

Share this article

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:

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

What is the primary function of Angular’s ngMessages module?

The ngMessages module in Angular is primarily used for displaying error messages in forms. It simplifies the process of showing and hiding error messages based on the state of form controls. This module provides a consistent way to handle error messages, making your code cleaner and easier to manage.

How does ngMessages connect to the model in Angular?

The ngMessages directive connects to the model through the form and input field names. When a form is submitted, Angular checks the validity of the form fields. If a field is invalid, an error message is triggered. The ngMessages directive then displays the appropriate error message based on the error type.

How can I show the message using ngMessages?

To show a message using ngMessages, you need to use the ng-message directive inside the ng-messages directive. The ng-message directive takes an expression that matches the key of the error to be displayed. When the error occurs, the corresponding message will be shown.

Can I use multiple error messages with ngMessages?

Yes, you can use multiple error messages with ngMessages. The ngMessages directive allows you to specify multiple error messages for a single input field. Each error message is associated with a different validation error, and the appropriate message is displayed when its corresponding error occurs.

How can I hide error messages using ngMessages?

To hide error messages using ngMessages, you can use the ng-messages-include directive. This directive allows you to specify a template that includes all the error messages you want to display. When an error occurs, only the messages in the template will be shown, and all other messages will be hidden.

Can I use ngMessages with custom validators?

Yes, you can use ngMessages with custom validators. You can define your own validation rules and associate them with error messages using the ng-message directive. When the custom validation fails, the corresponding error message will be displayed.

How does ngMessages improve form validation in Angular?

ngMessages improves form validation in Angular by providing a consistent way to handle error messages. It simplifies the process of showing and hiding error messages based on the state of form controls. This makes your code cleaner and easier to manage, and improves the user experience by providing clear and helpful feedback when form validation fails.

Can I use ngMessages with AngularJS 1.x?

Yes, you can use ngMessages with AngularJS 1.x. The ngMessages module was introduced in AngularJS 1.3, and is fully compatible with later versions of AngularJS.

How can I customize the appearance of error messages with ngMessages?

You can customize the appearance of error messages with ngMessages using CSS. The ng-messages and ng-message directives add classes to the error messages, which you can target with your CSS rules to style the messages as desired.

Can I use ngMessages to display success messages?

While ngMessages is primarily designed for displaying error messages, you can use it to display success messages as well. You would need to set up a custom validation rule that triggers when the form field is valid, and associate it with a success message using the ng-message directive.

Thomas GrecoThomas Greco
View Author

Thomas Greco is a web developer based out of New York City specializing in full-stack development with the M.E.A.N. stack technologies. Before web development, Thomas worked as a graphic designer, and he continues to utilize his background in design when building web applications. Have a question for Thomas ? You can reach him on Twitter.

angularform validationFormsinput validationLearn AngularngMessagesnilsonj
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form