numbersOnly Text Box Directive In AngularJS

Introduction

Directive in AngularJS is very powerful concept. Directives allow the developers to design any kind of controls or components in AngularJS, which can be used in HTML as an attribute, element, etc. That provides us great flexibility.

 

I will explain here how to create a custom directive that allows only numbers in a text box. Then, the text box will not accept any string or even special characters.

 

Given below is the program defining the directive.

var app = angular.module("myModule");

app.directive("numbersOnly", function () {
    return {
        require: 'ngModel',
        link: function (scope, element, attr, ngModelCtrl) {
            function fromUser(text) {
                if (text) {
                    var transformedInput = text.replace(/[^0-9]/g, '');

                    if (transformedInput !== text) {
                        ngModelCtrl.$setViewValue(transformedInput);
                        ngModelCtrl.$render();
                    }
                    return transformedInput;
                }
                return undefined;
            }
            ngModelCtrl.$parsers.push(fromUser);
        }
    };
});

You can use the numbersOnly directive as shown in the above code. Here, we have defined "require" type as "ngModel". Also, I have applied regex "/[^0-9]/g". This attribute allows entering only the numbers into the text box.

 

The require:'ngModel' allows developer to inject the model attached to the element or its parent element on which the directive is bound to.

Its basically an easiest way to pass ngModel into the link/compile function instead passing it using a scope option. Once you have access to ngModel, you can change its value using $setViewValue, make it dirty/clean using $formatters, apply watchers, etc.

 

Load this directive into index.html file and use it like the below code in your text box.

<input type="text"
         class="textFields" placeholder="Amount" ng-model="contactUsController.amount"
         numbers-only />

Conclusion

AngularJS directive is a very powerful feature. It provides great flexibility in the designing of any control or component, which provides modularization and re-usability.