Directive to Allow Decimal Numbers With a Single Decimal Point (.) Using AngularJS

Anubhav Chaudhary
9y
58.7k
0
2

Article

Introduction

In my previous article I explained How to Create a Directive to Allow Only Numbers Using AngularJs.

You often need to restrict the user to enter decimal numbers only but when you provide this functionality a major problem is encountered, the user can enter a decimal point (.) more than once in the TextBox and you encounter a medium bug. This article will provide the complete code to restrict users to decimal numbers with only a single decimal point allowed.

Step 1

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

<head runat="server">
<title></title>
<script src="angular.min.js"></script>
<script src="jquery-1.11.1.min.js"></script>
</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 decimal numbers using a directive of AngularJs.

<body>
<form ng-app="app" id="form1" runat="server">
<div>
<h3> Demo to Allow Decimal Numbers </h3>
<hr />
Provide Any Decimal Number: <input type="text"
name="AntiPer"
class="form-control"
allow-decimal-numbers />
<hr />
</div>
</form>
</body>

Step 3

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

<script>
var app = angular.module('app', []);
app.directive('allowDecimalNumbers', function () {
return {
restrict: 'A',
link: function (scope, elm, attrs, ctrl) {
elm.on('keydown', function (event) {
var $input = $(this);
var value = $input.val();
value = value.replace(/[^0-9\.]/g, '')
$input.val(value);
if (event.which == 64 || event.which == 16) {
// numbers
return false;
} if ([8, 13, 27, 37, 38, 39, 40, 110].indexOf(event.which) > -1) {
// backspace, enter, escape, arrows
return true;
} else if (event.which >= 48 && event.which <= 57) {
// numbers
return true;
} else if (event.which >= 96 && event.which <= 105) {
// numpad number
return true;
} else if ([46, 110, 190].indexOf(event.which) > -1) {
// dot and numpad dot
return true;
} else {
event.preventDefault();
return false;
}
});
}
}
});

Here first of all I created a module with the name "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.

After this I created the directive with the name "allowDecimalNumbers". If you are creating any kind of directive using AngularJs then you must always check that name of that directive should be provided using '-' at your HTML page and these dashes ("-") will be replaced by capital letters in the Angular code.

Since I had applied this directive on the attribute of the TextBox I had restricted this directive using "A", in other words Attriute.

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

These various conditions are applied to the ASCII values of the keys to allow or to stop them. You can see that a condition is added at the end that is allowing (46,110 and 190), this condition is used to allow the decimal point in the TextBox. In any case our ASCII values are not allowed by event.preventDefault() since it will remove that character and will revert back to the previous value.

But still the user is not restricted from entering the decimal point more than once. So, to remove this problem a small code is needed to be append in this directive as in the following:

var findsDot = new RegExp(/\./g)
var containsDot = value.match(findsDot)
if (containsDot != null && ([46, 110, 190].indexOf(event.which) > -1)) {
event.preventDefault();
return false;
}

Here I am determining if our TextBox already has a decimal point, if it already has a decimal point and a another character is entered with an ASCII value that matches the ASCII value of a decimal point then event.preventDefault() will remove this new decimal point.

So now our directive looks as in:

app.directive('allowDecimalNumbers', function () {
return {
restrict: 'A',
link: function (scope, elm, attrs, ctrl) {
elm.on('keydown', function (event) {
var $input = $(this);
var value = $input.val();
value = value.replace(/[^0-9\.]/g, '')
var findsDot = new RegExp(/\./g)
var containsDot = value.match(findsDot)
if (containsDot != null && ([46, 110, 190].indexOf(event.which) > -1)) {
event.preventDefault();
return false;
}
$input.val(value);
if (event.which == 64 || event.which == 16) {
// numbers
return false;
} if ([8, 13, 27, 37, 38, 39, 40, 110].indexOf(event.which) > -1) {
// backspace, enter, escape, arrows
return true;
} else if (event.which >= 48 && event.which <= 57) {
// numbers
return true;
} else if (event.which >= 96 && event.which <= 105) {
// numpad number
return true;
} else if ([46, 110, 190].indexOf(event.which) > -1) {
// dot and numpad dot
return true;
} else {
event.preventDefault();
return false;
}
});
}
}
});

Output

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

AllowDecimalNumbers

On running the application, a simple TextBox will be shown where decimal numbers are allowed.

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

AllowDecimalNumbers

But if you try to enter more than one decimal point at any position in the TextBox then that decimal point will also not be allowed and will be removed.

AllowDecimalNumbers

Up Next

Ebook Download

View all

Azure in 24 Days

Read by 0 people

Download Now!

Learn

View all