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-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
$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
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
See the Pen ngMessages Ex 2 by SitePoint (@SitePoint) on CodePen.
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.
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-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
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
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 is not defined first, it will not overwrite the message inside the template.
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-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
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.
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!