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 Greco](https://uploads.sitepoint.com/wp-content/uploads/2015/08/1439893595Tom_Greco-96x96.png)
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.