The $formatters directive plays a role in modifying the ngModel as it is

Question

The $formatters directive plays a role in modifying the ngModel as it is

I am facing an issue with using $formatters.

My objective is to conceal the phone number, while displaying only the last 4 characters. It should not display anything if left blank. If text is entered, the model is impacted by the mask and the hidden phone number is saved in the database...

Below is the directive I am utilizing:

.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 {
                //Email address, keep after @ and hide everything except the last 4 letters before
                valueHide = value.toString().substring(0, value.indexOf('@') - 4).replace(/[\S]/g, "\u2022");
                return valueHide + value.toString().substring(value.indexOf('@') - 4);
            }

        }

        controller.$formatters.push(function (value) {
            return maskValue(value);
        });

    }
};
});

To aid you further, here's a fiddle with a small implementation: http://jsfiddle.net/nqp4qtLk/2/

How can I prevent the model from being affected by the mask?

EDIT: I modified Gr3g's answer to align with my requirements

Check out the updated fiddle here: Updated fiddle

javascript angularjs angularjs-directive

Answer 1

Answer №1

Take a look at my UPDATED code snippets:

If you prefer not to remove *'s :
Fiddle

If it's okay to delete *'s :
Punker

Please note :
If deleting *'s is permitted, in the plunker example I demonstrate that certain actions are restricted:
- Removing star(s) when number(s) are visible.
- Inserting a number between two stars or at the beginning.

The code has expanded, hence only a snippet can be displayed here.
It is essential to implement the $parsers pipeline:

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

I included 2 functions in each pipeline so that a String can be accessed in the necessary function for modifying the value. This approach reduces the need for extensive conversions.

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

You may find ways to optimize it further, but exercise caution during any refactoring to address all scenarios effectively, particularly when dealing with deletion of *'s.

Answer 2

Take a look at my UPDATED code snippets:

If you prefer not to remove *'s :
Fiddle

If it's okay to delete *'s :
Punker

Please note :
If deleting *'s is permitted, in the plunker example I demonstrate that certain actions are restricted:
- Removing star(s) when number(s) are visible.
- Inserting a number between two stars or at the beginning.

The code has expanded, hence only a snippet can be displayed here.
It is essential to implement the $parsers pipeline:

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

I included 2 functions in each pipeline so that a String can be accessed in the necessary function for modifying the value. This approach reduces the need for extensive conversions.

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

You may find ways to optimize it further, but exercise caution during any refactoring to address all scenarios effectively, particularly when dealing with deletion of *'s.

Answer 3

Answer №2

It seems impossible to achieve the desired outcome by simply deleting a point while moving between two points.

To accomplish this task, it is recommended to utilize two separate components: one for typing each character and another to display only the last 4 digits of the phone number.

If you are up for the challenge, you could attempt handling all key events on the input yourself to potentially resolve the issue mentioned at the beginning of my response.

Answer 4

It seems impossible to achieve the desired outcome by simply deleting a point while moving between two points.

To accomplish this task, it is recommended to utilize two separate components: one for typing each character and another to display only the last 4 digits of the phone number.

If you are up for the challenge, you could attempt handling all key events on the input yourself to potentially resolve the issue mentioned at the beginning of my response.

Answer 5

Answer №3

In order to manipulate the value that is saved in the model, you can utilize $parsers.push method.

    var modifyValue = function(value) {
        var originalValue = scope.vm.phone.toString();                   
        var lastFourDigits = value.substring(value.length-4);
        var newString = originalValue.substring(0, originalValue.length-4);
        return (newString+lastFourDigits);   
        // Feel free to implement any logic to change the original value
    }

    controller.$parsers.push(function (value) { 
        return modifyValue(value);
        // Alternatively, customize the functionality as needed.
    });

Check out the updated fiddle here - http://jsfiddle.net/anh9y8d9/3/

Answer 6

In order to manipulate the value that is saved in the model, you can utilize $parsers.push method.

    var modifyValue = function(value) {
        var originalValue = scope.vm.phone.toString();                   
        var lastFourDigits = value.substring(value.length-4);
        var newString = originalValue.substring(0, originalValue.length-4);
        return (newString+lastFourDigits);   
        // Feel free to implement any logic to change the original value
    }

    controller.$parsers.push(function (value) { 
        return modifyValue(value);
        // Alternatively, customize the functionality as needed.
    });

Check out the updated fiddle here - http://jsfiddle.net/anh9y8d9/3/

The $formatters directive plays a role in modifying the ngModel as it is

Answer №1

Answer №2

Answer №3

Similar questions

Start running additional JavaScript code only after the previous one has been fully executed

Combining JS Tree and Datatables for Enhanced Functionality

The most efficient method for documenting $.trigger in JavaScript/jQuery is through the use of JSD

Developing with Angular 1.4.8 and JavaScript involves the process of building a constructor function to inherit properties into a third object

Once the data is retrieved and the old image is deleted, attempting to upload the new image still results in the old image being displayed in the Next.js application with React Query

Unable to process get requests on the Ionic application

The Google Books API has encountered an authentication error with status code 401

What is the best way to prevent npm install from running in nested workspace directories?

I'm looking to filter this array based on the value of a subarray that the user will specify the key and value for. How can I accomplish

Chrome is inaccurately reporting the outerHeight value, while IE and FireFox are displaying it correctly

An issue with the image filter function in JavaScript

Setting up the Kik Bot configuration can be a bit confusing at first

Why does Froala Editor not maintain formatting when retrieving data from the database?

Vue has detected an error during rendering: "TypeError: state.actionInfo.find is not a function"

Show complete items in Vue.js

Loading content synchronously

Retrieve the maximum numerical value from an object

Create a new CSS rule within a class, and remember to save the changes to

What is the exclusion filter in AngularJS?

Using AngularJS to showcase nested JSON arrays