Angularjs Directive Accept Positive Negative Decimal Number Only
A angularjs directive which allows positive negative decimal numbers to be enterd into a text box .
FEATURES
- Accepts only numbers.
- Accepts negative number.
- Accepts Decimal Number
- Restrict Decimal place upto
DEMO
HOW TO USE
Add "valid-number" and also include required parameter.
Positive Number
<input valid-number ng-model="mynumber" allow-decimal="false" allow-negative="false" type="text">
Negative Number
<input valid-number ng-model="mynumber" allow-decimal="false" allow-negative="true" type="text">
Decimal Numbers Default Decimal-Upto 2
<input valid-number ng-model="mynumber" allow-decimal="true" allow-negative="false" type="text">
Decimal Numbers Default Decimal-Upto 3
<input valid-number ng-model="mynumber" allow-decimal="true" allow-negative="false" decimal-upto="3" type="text">
PARAMETERS
- allow-negative="false" //To Restrict negative
- allow-decimal="false" //To Restrict decimal
- decimal-upto="3" // Restrict decimal upto
Directive Code
angular.module('testapp').directive('validNumber', function () {
return {
require: '?ngModel',
link: function (scope, element, attrs, ngModelCtrl) {
element.on('keydown', function (event) {
var keyCode=[]
if(attrs.allowNegative == "true")
{ keyCode = [8, 9, 36, 35, 37, 39, 46, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 109, 110, 173, 190,189];
}
else{
var keyCode = [8, 9, 36, 35, 37, 39, 46, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 110, 173, 190];
}
if(attrs.allowDecimal == "false") {
var index = keyCode.indexOf(190);
if (index > -1) {
keyCode.splice(index, 1);
}
}
if ($.inArray(event.which, keyCode) == -1) event.preventDefault();
else {console.log(2);
var oVal = ngModelCtrl.$modelValue || '';
if ($.inArray(event.which, [109, 173]) > -1 && oVal.indexOf('-') > -1) event.preventDefault();
else if ($.inArray(event.which, [110, 190]) > -1 && oVal.indexOf('.') > -1) event.preventDefault();
}
})
.on('blur', function () {
if (element.val() == '' || parseFloat(element.val()) == 0.0 || element.val() == '-') {
ngModelCtrl.$setViewValue('0.00');
}
else if(attrs.allowDecimal == "false")
{
ngModelCtrl.$setViewValue(element.val());
}
else{
if(attrs.decimalUpto)
{
var fixedValue = parseFloat(element.val()).toFixed(attrs.decimalUpto);}
else{ var fixedValue = parseFloat(element.val()).toFixed(2);}
ngModelCtrl.$setViewValue(fixedValue);
}
ngModelCtrl.$render();
scope.$apply();
});
ngModelCtrl.$parsers.push(function (text) {
var oVal = ngModelCtrl.$modelValue;
var nVal = ngModelCtrl.$viewValue;
console.log(nVal);
if (parseFloat(nVal) != nVal) {
if (nVal === null || nVal === undefined || nVal == '' || nVal == '-') oVal = nVal;
ngModelCtrl.$setViewValue(oVal);
ngModelCtrl.$render();
return oVal;
}
else {
var decimalCheck = nVal.split('.');
if (!angular.isUndefined(decimalCheck[1])) {
if(attrs.decimalUpto)
decimalCheck[1] = decimalCheck[1].slice(0, attrs.decimalUpto);
else
decimalCheck[1] = decimalCheck[1].slice(0, 2);
nVal = decimalCheck[0] + '.' + decimalCheck[1];
}
ngModelCtrl.$setViewValue(nVal);
ngModelCtrl.$render();
return nVal;
}
});
ngModelCtrl.$formatters.push(function (text) {
if (text == '0' || text == null && attrs.allowDecimal == "false") return '0';
else if (text == '0' || text == null && attrs.allowDecimal != "false" && attrs.decimalUpto == undefined) return '0.00';
else if (text == '0' || text == null && attrs.allowDecimal != "false" && attrs.decimalUpto != undefined) return parseFloat(0).toFixed(attrs.decimalUpto);
else if (attrs.allowDecimal != "false" && attrs.decimalUpto != undefined) return parseFloat(text).toFixed(attrs.decimalUpto);
else return parseFloat(text).toFixed(2);
});
}
};
});