Directive to Allow Only Numbers Using AngularJs

Introduction

Before reading this article there is only one prerequisite condition; you should know how to create a directive in AngularJs and why we need to create them.

Step 1

First of all you need to add AngularJs and jQuery to your page, just like here:

  1. <head runat="server">  
  2.     <title></title>  
  3.     <script src="angular.min.js"></script>  
  4.     <script src="jquery-1.11.1.min.js"></script>  
  5. </head>  

You can either download them from my code that is available at the start of this article or you can download from their official websites.

(AngularJs file can be downloaded from here also).

Step 2

Now I am just adding a textbox where I need to allow only numbers using an AngularJs directive.

  1. <body>  
  2.     <form ng-app="app" id="form1" runat="server">  
  3.         <div>
  4.             <h3> Demo to Allow Numbers Only </h3>
  5.             <hr />  
  6.             Provide Your Mobile Number: <input type="text"  
  7.                 name="MobileNumber"  
  8.                 class="form-control"  
  9.                 allow-only-numbers />  
  10.             <hr />  
  11.         </div>  
  12.     </form>  
  13. </body>

Step 3

Now we need to work on the Angular code, the main part of this article.

  1.     <script>  
  2.         var app = angular.module('app', []);  
  3.         app.directive('allowOnlyNumbers'function () {  
  4.             return {  
  5.                 restrict: 'A',  
  6.                 link: function (scope, elm, attrs, ctrl) {  
  7.                     elm.on('keydown'function (event) {  
  8.                         if (event.which == 64 || event.which == 16) {  
  9.                             // to allow numbers  
  10.                             return false;  
  11.                         } else if (event.which >= 48 && event.which <= 57) {  
  12.                             // to allow numbers  
  13.                             return true;  
  14.                         } else if (event.which >= 96 && event.which <= 105) {  
  15.                             // to allow numpad number  
  16.                             return true;  
  17.                         } else if ([8, 13, 27, 37, 38, 39, 40].indexOf(event.which) > -1) {  
  18.                             // to allow backspace, enter, escape, arrows  
  19.                             return true;  
  20.                         } else {  
  21.                             event.preventDefault();  
  22.                             // to stop others  
  23.                             return false;  
  24.                         }  
  25.                     });  
  26.                 }  
  27.             }  
  28.         });  
  29. </script>

Here I first created a module named "app". The module creation is a necessary part if you want to use Angular. This module is added to the HTML page using the ng-app directive.

Then I created the directive with the name "allowOnlyNumbers". If you are creating any kind of directive using AngularJs then you must always check that the name is provided using "-" in your HTML page and these dashes "-" will be replaced by capital letters in the Angular code.

Since I had applied this directive to the attribute of the textbox I had restricted this directive using "A" for Attribute.

I had applied this directive on the keydown event of the textbox.

After those various conditions are applied to the ASCII values of the keys to allow or to stop them. In any case our ASCII values are not allowed. event.preventDefault() will remove that character and will revert to the previous value.

But still I had the serious problem of all the characters that were entered by pressing the shift + key were not removed by this code, so I used simple jQuery at the start of the code to help prevent this situation.

  1. var $input = $(this);  
  2. var value = $input.val();  
  3. value = value.replace(/[^0-9]/g, '')  
  4. $input.val(value);  

So now our directive looks as in:

  1. app.directive('allowOnlyNumbers'function () {  
  2.     return {  
  3.         restrict: 'A',  
  4.         link: function (scope, elm, attrs, ctrl) {  
  5.             elm.on('keydown'function (event) {  
  6.                 var $input = $(this);  
  7.                 var value = $input.val();  
  8.                 value = value.replace(/[^0-9]/g, '')  
  9.                 $input.val(value);  
  10.                 if (event.which == 64 || event.which == 16) {  
  11.                     // to allow numbers  
  12.                     return false;  
  13.                 } else if (event.which >= 48 && event.which <= 57) {  
  14.                     // to allow numbers  
  15.                     return true;  
  16.                 } else if (event.which >= 96 && event.which <= 105) {  
  17.                     // to allow numpad number  
  18.                     return true;  
  19.                 } else if ([8, 13, 27, 37, 38, 39, 40].indexOf(event.which) > -1) {  
  20.                     // to allow backspace, enter, escape, arrows  
  21.                     return true;  
  22.                 } else {  
  23.                     event.preventDefault();  
  24.                     // to stop others  
  25.                     //alert("Sorry Only Numbers Allowed");  
  26.                     return false;  
  27.                 }  
  28.             });  
  29.         }  
  30.     }  
  31. });  

Output

Now our application is created and we can check the output.

On running the application a simple textbox will be shown where only numbers are allowed.

Directive in AngularJS 

If you press the numbers from anywhere in the key, they will be allowed but all the other characters will not be allowed to exist, even if they are special characters.

Directive in AngularJS

In my next article you can read How to Allow Decimal Numbers With Only a Single Decimal Point (.) Using AngularJs Directive.

Up Next
    Ebook Download
    View all
    Learn
    View all