How can I show only the final four digits of an input field using Angular Material and AngularJS?

Question

How can I show only the final four digits of an input field using Angular Material and AngularJS?

As a newcomer to Angular Material and Angular JS, I am striving to create an md-input field that displays only the last 4 digits in a masked format, such as "********1234". While my experience is currently limited to using md-input password fields where all characters are hidden or replaced with "", I was able to achieve this functionality using JavaScript. However, I am unsure of how to implement this in Angular JS. Here is the code snippet that worked for me:

$('#cardNum').bind('input', function () { $(this).val(($(this).val().replace(/\d(?=\d{4})/g, ''))); });

javascript html css angularjs angular-material

Answer 1

Answer №1

If you need to mask a password input, try creating a custom filter specifically for that purpose:

appModule.filter('passwordMask', function() {
    return function (input, num) {
        if (isNaN(num) || num < 1) {
            return String(input).replace(/./g, '*');
        }
        var mask = RegExp('(.{1,' + num + '}$)|.', 'g');
        return String(input).replace(mask, function(hide, show) {
            return show || '*';
        });
    };
});

To use the custom filter, simply add it into your code like this:

<div ng-bind="passwordModel | passwordMask:4" class="password-style"></div>

This method should work well for masking passwords as needed.

Answer 2

If you need to mask a password input, try creating a custom filter specifically for that purpose:

appModule.filter('passwordMask', function() {
    return function (input, num) {
        if (isNaN(num) || num < 1) {
            return String(input).replace(/./g, '*');
        }
        var mask = RegExp('(.{1,' + num + '}$)|.', 'g');
        return String(input).replace(mask, function(hide, show) {
            return show || '*';
        });
    };
});

To use the custom filter, simply add it into your code like this:

<div ng-bind="passwordModel | passwordMask:4" class="password-style"></div>

This method should work well for masking passwords as needed.

Answer 3

Answer №2

Hey @Guedes, would it be feasible to implement this code snippet within an input field?

<input  name="password" type="password" ng-bind="user.password | passwordMask:4" />

    myapp.controller('controller', function ($scope) {
      $scope.user = {
        name: '',
        password: '',
      };
    });

Answer 4

Hey @Guedes, would it be feasible to implement this code snippet within an input field?

<input  name="password" type="password" ng-bind="user.password | passwordMask:4" />

    myapp.controller('controller', function ($scope) {
      $scope.user = {
        name: '',
        password: '',
      };
    });

How can I show only the final four digits of an input field using Angular Material and AngularJS?

Answer №1

Answer №2

Similar questions

How can we use withStyles to customize the styling of a selected ListItem in ReactJS and Material UI?

Creating a Search Functionality within a Tab Component in Ionic

How to send route parameters to a controller function in ExpressJS

Using jQuery to load HTML response into entire page

Using a function as an argument within an Angular directive

Arrange the items in a list in JavaScript in descending sequence

Encountering problem with selecting values in Select2 with ajax

Build a custom Angular2 pipe to convert JSON data into an array through iteration

Guide on NodeJS: Harnessing the power of nested functions to ensure synchronous execution

What is the best way to import a file in meteor version 1.3?

Why does the flex-start and flex-end values correspond to the top and bottom positions when using the flex-direction property set

Retrieve the attribute from the element that is in the active state

Is it possible for a function parameter to utilize an array method?

Adjusting the Transparency of the Background in a Pop-Up

Is there a way to horizontally center a content container in Flutter similar to a "max-width" container in CSS?

Utilizing a combination of nested modules and ui-views with ui-router for a complex

Initialization of Angular provider $get is missing

Utilizing Angular.js to Retrieve JSON Data Using the HTTP Response Interceptor

The CSRF token is mysteriously altering in places it should remain unchanged

Retrieve a value using the jQuery each() method