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-class and ng-show to display these errors. This resulted in cluttered, repetitive code.
Now, however, 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.
Getting started
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
- Message
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>
Enter ngMessages
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.
Required Fields
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 $error object.
<div ng-messages="exampleForm.userFirstName.$error">
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 required.
Continue reading %Easy Form Validation in AngularJS with ngMessages%
by Thomas Greco via SitePoint
No comments:
Post a Comment