I'm using angular, I was looking hard, but I can't find a good input mask. I'll have two kind of inputs, what I want is that when I type a number, in currency inputs I need a directive or something that when I type a number the sign '$' appear in the beginning of the input.
And when the input is a percentage the sign '%' a directive or something that appends the '%' at the end of the string.
I have this directive that allow only numbers, and you can say the lenght of the integer part and the decimal part. If it can be reused to add a $ or % will be perfect.
app.directive('isNumber', function () {
return {
require: 'ngModel',
link: function (scope, element, attrs, modelCtrl) {
scope.$watch(attrs.ngModel, function (newValue, oldValue) {
var decimalLenght = parseInt(attrs.decimalpart) + 1;
var integerLenght = parseInt(attrs.integerpart) + 1;
var arr = String(newValue).split("");
if (arr.length === 0) return;
if (arr.length === 1 && arr[0] === '.') return;
if (arr.length === 2 && newValue === '-.') return;
if (isNaN(newValue) || ((index_dot = String(newValue).indexOf('.')) != -1
&& String(newValue).length - index_dot > decimalLenght
) || (index_dot == -1 && arr.length === integerLenght)) {
var scopeVar = scope;
var a = attrs.ngModel.split(".");
for (i = 0; i < a.length - 1; i++) {
if (scopeVar === undefined || scopeVar == null || newValue == null) {
return;
}
scopeVar = scopeVar[a[i]];
}
scopeVar[a[a.length - 1]] = oldValue;
}
});
}
};
});
To use it just put is-number, decimalpart and integerpart
<input name="ZCHGSRP" type="text" ng-model="selectedItem.ZCHGSRP" is-number decimalpart="-1" integerpart="3" class="form-control" class="form-control" required />
You can use this, must fine tune it. its just a rough approach. check out this fiddle https://jsfiddle.net/devjit/bgr4zvkn/1/.
app.directive('isNumber', function () {
return {
require: 'ngModel',
link: function (scope, element, attrs, modelCtrl) {
debugger;
scope.$watch(attrs.ngModel, function (newValue, oldValue) {
var decimalLenght = parseInt(attrs.decimalpart) + 1;
var integerLenght = parseInt(attrs.integerpart) + 1;
newValue = newValue.replace('$','');
var arr = String(newValue).split("");
if (arr.length === 0) return;
if (arr.length === 1 && arr[0] === '.') return;
if (arr.length === 2 && newValue === '-.') return;
if (isNaN(newValue) || ((index_dot = String(newValue).indexOf('.')) != -1
&& String(newValue).length - index_dot > decimalLenght
) || (index_dot == -1 && arr.length === integerLenght)) {
var scopeVar = scope;
var a = attrs.ngModel.split(".");
for (i = 0; i < a.length - 1; i++) {
if (scopeVar === undefined || scopeVar == null || newValue == null) {
return;
}
scopeVar = scopeVar[a[i]];
}
scopeVar[a[a.length - 1]] = oldValue;
return;
}
var scopeVariable = scope;
var ngMod = attrs.ngModel.split(".");
for (i = 0; i < ngMod.length - 1; i++) {
if (scopeVariable === undefined || scopeVariable == null || newValue == null) {
return;
}
scopeVariable = scopeVariable[ngMod[i]];
}
scopeVariable[ngMod[ngMod.length - 1]]='$'+ newValue;
});
}
};
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments