How to Implement Masking in AngularJS
I'm trying to apply masking to $viewValue in my console, but it's not reflecting in the view.
NgModelController {$viewValue: "656-56", $modelValue: "656565", $$rawModelValue: "656565", $validators: Object, $asyncValidators: Object…}
Sample Code :
var app = angular.module("masking",[]);
app.directive('textbox', function mask() {
return {
restrict: 'E',
transclude: true,
require: 'ngModel',
scope: { },
bindToController: {
model: "=ngModel",
},
controller: function($scope, $attrs) {
},
compile: function() {
return {
pre: function(scope, el, attrs) {
},
post: function(scope, element, attrs, Ctrls) {
}
};
},
template: '<div><input type="text" ng-model="Ctrl.model" /> </div> ',
controllerAs: 'Ctrl',
};
});
app.directive('angularMask', function () {
return {
restrict: 'A',
require: 'ngModel',
scope: false,
link: function ($scope, el, attrs, model) {
$scope.$watch(function(){return attrs.angularMask;}, function(value) {
if (model.$viewValue != null){
model.$viewValue = mask(String(model.$viewValue).replace(/\D/g, ''));
el.val(model.$viewValue);
}
});
model.$formatters.push(function (value) {
return value === null ? '' : mask(String(value).replace(/\D/g, ''));
});
model.$parsers.push(function (value) {
model.$viewValue = mask(value);
var modelValue = attrs.isModelValueEqualViewValues ? model.$viewValue : String(value).replace(/\D/g, '');
el.val(model.$viewValue);
return modelValue;
});
function mask(val) {
console.log(model);
var format = attrs.angularMask,
arrFormat = format.split('|');
if (arrFormat.length > 1) {
arrFormat.sort(function (a, b) {
return a.length - b.length;
});
}
if (val === null || val == '') {
return '';
}
var value = String(val).replace(/\D/g, '');
if (arrFormat.length > 1) {
for (var a in arrFormat) {
if (value.replace(/\D/g, '').length <= arrFormat[a].replace(/\D/g, '').length) {
format = arrFormat[a];
break;
}
}
}
var newValue = '';
for (var nmI = 0, mI = 0; mI < format.length;) {
if (!value[nmI]) {
break;
}
if (format[mI].match(/\D/)) {
newValue += format[mI];
} else {
newValue += value[nmI];
nmI++;
}
mI++;
}
return newValue;
}
}
};
});
Example HTML Code
<textbox ng-model="myModelPhone" angular-mask="000-000-000"></textbox>
{{myModelPhone}}