I've created a custom pipe which is replacing the input value with asterisks and added space between 4 characters below the code
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'creditCard'
})
export class CreditCardPipe implements PipeTransform {
transform(value: any) {
if (value === undefined) {
return value;
}
const s = value.replace(/\s+/g, '').replace(/([\w*]{4})/g,'$1 ').trim();
return s.replace(/\w/g, '*');
}
}
I've applied this pipe to the Input field(formcontrol) and it is working as expected, but if I tried to get the value of the field getting the asterisks.
<input name="creditcardnumber" formControlName="creditCardNumber"
[value]="totalDueNewCardForm.get('creditCardNumber').value | creditCard"
type="text" appNumbersOnly required />
Is there any way to get the real value of formcontrol instead of pipe value.
Tried another way to make this happen with Directive
I've created a custom directive which is replacing the input value with asterisks and added space between 4 characters below the code
import { Directive, ElementRef, HostListener } from '@angular/core';
import {NgControl} from '@angular/forms';
@Directive({
selector: '[appNumbersOnly]'
})
export class NumbersOnlyDirective {
private regex: RegExp = new RegExp(/^-?[0-9]+(\.[0-9]*){0,1}$/g);
private specialKeys: Array<string> = ['Backspace', 'Tab'];
constructor(private el: ElementRef, private model: NgControl) {
}
@HostListener('input', ['$event'])
inputChange(event: any) {
debugger;
if (this.specialKeys.indexOf(event.key) !== -1) {
return;
}
this.model.control.setValue(event.target.value.replace(/\s+/g, '').replace(/([\w*]{4})/g,'$1 ').trim().replace(/\w/g,'*'));
}
}
I've applied this directive to the Input field(formcontrol) and it is working as expected, but if I tried to get the value of the field getting the asterisks.
<input type="text" formControlName="firstName" required appNumbersOnly>
Is there any way to change the appearance and make the formcontrol value as is. or any other solution for this
Please can you check the example