Easy Form Validation in AngularJS with ngMessages
Last fall, the ngMessages module was rolled out with the release of Angular 1.3. This added enhanced support for displaying messages to the user — typically error messages from form validation. Before the release of
ngMessages, developers were forced to rely on directives such as
ng-show to display these errors. This resulted in cluttered, repetitive code.
ngMessages provides the ability to display custom error messages without having to violate the D.R.Y. principle of coding — Don’t Repeat Yourself. And, as Angular steadily progresses towards version 2.0, Angular’s development team continues to roll out new features for it. Therefore, I thought it would be beneficial to demonstrate just how easy
ngMessages makes the process of validating forms in AngularJS.
This will be our basic template:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>ngMessages demo</title> </head> <body ng-app="app"> <script src="path/to/angular.min.js"></script> <script src="path/to/angular-messages.min.js"></script> <script> var app = angular.module('app', ['ngMessages']); </script> </body> </html>
As you can see, we are loading Angular, followed by the
ngMessages module, before injecting it into our application. For those of you wishing to folow along at home, the code for this tutorial is available on GitHub. For the impatient, you can also skip to the demo at the end of the article.
Next we are going to create a form with the following fields:
- First Name
- Last Name
- Email Address
- Phone Number
I will add a
required attribute to all of the fields (as they will be compulsory), as well as using an
ng-model directive to bind them to properties on the current scope.
<form name="exampleForm" class="myForm" required> <label>First Name:</label> <input type="text" name="userFirstName" ng-model="firstName" required /> <label>Last Name:</label> <input type="text" name="userLastName" ng-model="lastName" required /> <label>Email Address:</label> <input type="email" name="userEmail" ng-model="email" required /> <label>Phone Number:</label> <input type="email" name="userPhoneNumber" ng-model="phoneNumber" required /> <label>User Message:</label> <textarea type="text" name="userMessage" ng-model="message" required></textarea> </form>
Now let’s dive into the code and check out how
ngMessages allows us to use the attributes we specify on the inputs for simple form validation.
The first thing you should take note of is that the form is named
exampleForm. When using the
ng-messages directive, we pass it an angular expression evaluating to a key/value object (typically the
$error object on an
ngModel instance). In our case this will be the name of the form, chained to the
name attribute of the respective form field, chained to the aforementioned
Once that is done, you just need to nest a
div containing an
ng-message attribute inside of the
ngMessages div. The value passed to the
ng-message attribute will depend upon the directives we added to the input field; in this case, the value will be
Continue reading %Easy Form Validation in AngularJS with ngMessages%