Hey everyone, I'm currently working with Angular and typescript. I have a requirement to hide the first 8 characters that the user enters and only show the remaining 4 characters.
Update: I have included a link to the Stackblitz demo Stackblitz
<input type="text" [value]="maskedInput" (input)="onInput($event)" maxlength="12">
<p>Masked: {{ maskedInput }}</p>
<p>Unmasked: {{ unmaskedInput }}</p>
I am facing an issue where the input field is being masked correctly, but even the unmasked version is showing the masked characters.
maskedInput: string = '';
unmaskedInput: string = '';
digitsBeforeMasking: string = '';
onInput(event: any) {
this.unmaskedInput = event.target.value;
this.digitsBeforeMasking = this.unmaskedInput.substring(0, 8);
this.maskedInput = this.digitsBeforeMasking.replace(/\d/g, 'X') + this.unmaskedInput.substring(8);
}
}
Any assistance on this matter would be greatly appreciated. Thank you!