Creating a form directive with custom validation

Continuing within the context of the previous examples, we will now create a custom directive to validate some form fields. This recipe applies to any type of form field; however, we will use the <select> tag.

AngularJS offers some very useful resources for form validation with built-in directives. We will create a component that can be reused elsewhere in our application.

Getting ready

Just as we did in the previous chapters, we will continue using the same application created in the previous recipe.

In this example, we will use an external library called ngMessages.

For the purpose of this example, we just add the library as a dependency in our index.html, using a Content Delivery Network (CDN), as we did in the previous recipe.

Add the following link to the index.html file:

<script

src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angul ar-messages.min.js"></script>

The scripts tag goes right at the end of .

Creating Reusable Directives

1. Create a new folder on app/modules/shared/directive and name it album-rating. Create a new file and place the following code. Save the file as album.rating.directive.js:

'use strict';

/**

* @ngdoc function

* @name app.directive:albumRatingDirective * @description

* # albumRatingDirective * Directive of the app */

angular.module('interface-components') .directive('albumRating', [function () { return {

restrict: 'E', require: '?ngModel',

templateUrl: 'app/modules/shared/directives/album- rating/album.rating.html',

link: function(scope, element, attrs, ngModel) { if (!ngModel) return;

// Copy from ngModel and place on local scope ngModel.$render = function() {

scope.item = {

Chapter 8

scope.$watch('item', function(item) { // Mandatory filds

Creating Reusable Directives

2. Create a new file and place the following code, save the file as album.rating.

html:

Best Album

</select>

</div>

Music

</select>

</div>

3. Let's use the same album.html page and place the following code right after the album-description tag:

<br>

<album-rating name="album" ng-model="user.choices"

required></album-rating>

<hr>

Chapter 8

161 <li ng-message="albumRequired">Please Choose an

Album</li>

<li ng-message="musicRequired">Please Rating the music</li>

</ul>

</alert>

</form>

</div>

4. Add the following code to the album.html page, right after the album description directive:

<br>

<album-rating name="album" ng-model="user.choices"

required></album-rating>

<hr>

<li ng-message="albumRequired">Please Choose an Album</li>

<li ng-message="musicRequired">Please Rating the music</li>

</ul>

</alert>

</form>

</div>

5. Open your terminal window at the root project folder and type:

grunt dev

Creating Reusable Directives

162

Check the URL http://127.0.0.1:8000/#!/album. You will see the following image on your browser:

When we choose an album and a score, the result will be the same as the following screenshot:

How it works…

Now, let's understand what happened with the directive. You noticed that this time we did not use any code in an external controller. This directive was composed using only the property link() function.

Also, we used the ngModel:

// Copy from ngModel and place on local scope ngModel.$render = function() {

scope.item = {

music: ngModel.$viewValue, album: ngModel.$viewValue };

};

Chapter 8

163 Let's see what the official documentation says about ngModel: The

ngModel directive binds an input, select, textarea (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive.

NgModel is responsible for:

f Binding the view into the model, which other directives, such as input, textarea, or select, require

f Providing validation behavior (for example, required, number, email, url)

f Keeping the state of the control (valid/invalid, dirty/pristine, touched/untouched, validation errors)

f Setting related CSS classes on the element (valid, invalid, dirty, pristine, touched, ng-untouched, ng-empty, ng-not-empty), including animations

f Registering the control with its parent form

This way, we can map the alterations that come into our select tag within the template of the directive:

</select>

</select>

The ng-repeat runs over the scope.selects function inside the link function, where we return two functions:

Creating Reusable Directives

164

And for every alteration that the model receives, the watch() function applies validation and sets the values chosen in the select box:

scope.$watch('item', function(item) { // Mandatory fields

if (attrs.required) {

var albumIsValid = !!item.album;

var musicIsValid = !!item.music;

// Validation

ngModel.$setValidity('required', albumIsValid || musicIsValid ? true : false);

ngModel.$setValidity('albumRequired', albumIsValid ? true : false);

ngModel.$setValidity('musicRequired', musicIsValid ? true : false);

// ngModel update

if (albumIsValid && musicIsValid) {

ngModel.$setViewValue('Best Album: ' + item.album + ' ,Music rating: ' + item.music + ' Stars');

} } }, true);

The album.html file uses the directive and the ngMessages validation to show some warning before the form can be completed.

In this recipe, we try to show how it is possible to combine some built-in directives within a custom form component directive using AngularJS resources, in order to help us complete a task.

Creating a form directive with custom validation

Getting ready

How it works…

See also