Social Security Number Masking in Angular

Introduction

In this article, we will learn how to mask Social Security Number (SSN) using Angular Directive.

So, let's get started.

What is a Social Security Number (SSN)

A Social Security Number (SSN) is a unique, 9-digit number used for taxpayer identification, income reporting, and record-keeping purposes. Once issued, the number is valid for a lifetime. You should keep it safe and provide only as needed to US government agencies or credible financial institutions.

Adding Angular Directive
 

Add SsnMask Directive

ng generate directive ssn-mask

Note

• g- generate
• d- directive

Now, open ssn-mask.directive.ts.

import { Directive, ElementRef, HostListener, forwardRef } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
@Directive({
    selector: '[appSsnMask]',
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => SsnMaskDirective),
            multi: true,
        },
    ],
})
export class SsnMaskDirective implements ControlValueAccessor {
    private fullSSN = '';
    constructor(private el: ElementRef) { }
    @HostListener('focus')
    onFocus(): void {
        this.el.nativeElement.value = this.formatSSN(this.fullSSN);
    }
    @HostListener('blur')
    onBlur(): void {
        this.el.nativeElement.value = this.maskSSN(this.fullSSN);
        this.onTouched();
    }
    @HostListener('input', ['$event'])
    onInput(event: Event): void {
        const input = event.target as HTMLInputElement;
        this.fullSSN = input.value.replace(/\D/g, ''); // Remove all non-digit characters
        if (this.fullSSN.length > 9) {
            this.fullSSN = this.fullSSN.slice(0, 9); // Limit input to 9 digits
        }
        input.value = this.formatSSN(this.fullSSN);
        this.onChange(this.fullSSN);
    }
    // ControlValueAccessor implementation
    writeValue(value: string): void {
        this.fullSSN = value || '';
        this.el.nativeElement.value = this.maskSSN(this.fullSSN);
    }
    registerOnChange(fn: (value: string) => void): void {
        this.onChange = fn;
    }
    registerOnTouched(fn: () => void): void {
        this.onTouched = fn;
    }
    private onChange: (value: string) => void = () => { };
    private onTouched: () => void = () => { };
    private maskSSN(value: string): string {
        if (value.length <= 4) {
            return 'X'.repeat(value.length);
        }
        // const maskedSection = 'X'.repeat(value.length - 4);
        const visibleSection = value.slice(-4);
        return `XXX-XX-${visibleSection}`;
    }
    private formatSSN(value: string): string {
        if (value.length > 5) {
            return value.replace(/(\d{3})(\d{2})(\d{0,4})/, '$1-$2-$3');
        } else if (value.length > 3) {
            return value.replace(/(\d{3})(\d{0,2})/, '$1-$2');
        } else {
            return value;
        }
    }
}

Note. In the above code,

• Auto formating ssn in xxx-xx-xxxx.
• Masking SSN when focus out from input control
• Unmasking SSN on focus in or click to input control.

Adding a Directive tag to component.html

<input id="SSN" type="text" inputmode="numeric" appSsnMask autocomplete="off" maxlength="11">

Note. Here appSsnMask is a directive added to the input control.

Now When we run the project. In Browser.

1. In Browser control, before inserting SSN.
   
2. After the user inserts the SSN, the SSN gets auto-formatted.
   
3. When focus-out from the input control, SSN Masking. Only the last 4 digit number will be visible.
   
4. When focus-in or Clicking inside the control, SSN Unmask and show full SSN.
   

Summary

In this article, I have tried to explain how to mask Social Security Number (SSN) using Angular Directive.