The $ formatters directive affects ngModel when writing

Question

I have a problem using $ formatters.

My goal is to hide the phone number, just leave the last 4 characters visible. This is normal if you are not writing anything in the input. If you write something, the mask affects the model, and I register the hidden phone in DB ...

In this directive, I use:

.directive('tsHideField', function () { return { require: 'ngModel', restrict: 'A', link: function (scope, element, attributes, controller) { var maskValue = function (value) { if (!value) { return ""; } if (value.length <= 4) { return value; } var valueHide = ""; if (value.indexOf('@') === -1) { //leave last 4 chars valueHide = value.toString().substring(0, value.length - 4).replace(/[\S]/g, "\u2022"); return valueHide + value.toString().substring(value.length - 4); } else { //Adresse email, on laisse après le @ et on cache tout sauf les 4 dernières lettre avant //' [e-mail] '.substring(0,' [e-mail] '.indexOf('@') - 4).replace(/[\S]/g, "\u2022") + ' [e-mail] '.substring(' [e-mail] '.indexOf('@') - 4) valueHide = value.toString().substring(0, value.indexOf('@') - 4).replace(/[\S]/g, "\u2022"); return valueHide + value.toString().substring(value.indexOf('@') - 4); } // replace all characters with the mask character //return (value || "").replace(/[\S]/g, "\u2022"); } /** SI ON VEUT EGALEMENT CACHER AL ECRIT: * * var createMaskedInputElement = function() { if (! maskedInputElement || ! maskedInputElement.length) { maskedInputElement = element.clone(true); maskedInputElement.attr("type", "password"); // ensure the value is masked maskedInputElement.removeAttr("name"); // ensure the password save prompt won't show maskedInputElement.removeAttr("core.application.main.directive.mask"); // ensure an infinite loop of clones isn't created maskedInputElement.bind("blur", function() { element.removeClass("ng-hide"); maskedInputElement.remove(); maskedInputElement = null; }); $compile(maskedInputElement)(scope); element.after(maskedInputElement); } }; element.bind("focus", function() { createMaskedInputElement(); element.addClass("ng-hide"); maskedInputElement[0].focus(); }); */ controller.$formatters.push(function (value) { return maskValue(value); }); } }; }); 

And for your object, here is a fiddle with a small implementation: http://jsfiddle.net/nqp4qtLk/2/

How to prevent the model from affecting the mask?

EDIT: I will adapt Gr3g's answer to my requirements

see updated script: Updated violin

Answer 1

See my EDITED scripts:

If you do not allow * delete:
Fiddle

If you allow * delete:
Punker

Note:
If you allow * to be deleted, you will see in the plunter, which I do not allow:
- Removing stars (s) when numbers are visible.
- Adding a number between 2 stars or in the first position.

The code has grown, so I can only show partial code here. Obviously, you need the $parsers :

 controller.$parsers.push(function(val){ //Modify your value return modifiedValue || val; }); 

Note that I added 2 functions in each pipeline so that I can access the String in the function where I need to change the value. I don't need to care (too much) about ghosts.

 controller.$parsers.unshift(function(val){ return String(val); }); 

You may be able to do it faster, but be careful when refactoring should think about all the possibilities. Especially if * can be removed.

Answer 2

You can use $ parsers.push to control the value that will be stored in the model.

  var unmask = function(value) { var original = scope.vm.phone.toString(); var last4 = value.substring(value.length-4); var newstr = original.substring(0, original.length-4); return (newstr+last4); // you can have whatever logic you want, to manipulate the original value } controller.$parsers.push(function (value) { return unmask(value); // or do what ever you want. }); 

Updated fiddle- http://jsfiddle.net/anh9y8d9/3/

Answer 3

I do not think you can, imagine that I go between 2 points and delete one, how do you do it?

You must use 2 different components: one to enter each character, the other - a phone number with a display of only 4 of the latter.

The hardest way: handle all the key input events yourself, so you can even decide what I said at the beginning of my post.