Angular2 Маскировка SSN
Я сделал маскировку номера телефона и SSN с помощью директив Angular2. Но мне нужно заменить скрытый SSN звездочкой ().Например: введите SSN: 123-45-6789, введите SSN:- - ****. Что у меня есть: входной SSN: 123456789, выходной SSN: 123-45-6789. Рабочий код Плункера: https://plnkr.co/edit/XrqvSuge65Oi7IovBa8Y?p=preview
masking.component.ts
import {Component, Directive, Output, EventEmitter} from '@angular/core';
import {FormBuilder, FORM_DIRECTIVES, NgControl} from '@angular/common';
import {PhoneMask} from './phoneMask.directive';
import {SsnMask} from './ssnMask.directive';
@Component({
selector: 'masking',
providers: [],
template: `
<form [ngFormModel]="form">
Phone:<input type="text" phone [(ngModel)]="data" (rawChange)="rawPhone=$event" ngControl="phone" maxlength="14">
SSN:<input type="text" ssn [(ngModel)]="ssndata" (rawChange)="rawSsn=$event" ngControl="ssn" maxlength="11">
</form>
<div>Raw Numbers: {{rawPhone}}</div>
<div>SSN: {{rawSsn}}</div>
`,
directives: [PhoneMask,SsnMask]
})
export class Masking {
form :any;
constructor(private fb:FormBuilder) {
this.form=fb.group({
phone:[''],
ssn:['']
})
}
}
ssnMask.directive.ts
import {Directive,Output,EventEmitter} from '@angular/core';
import {NgControl} from '@angular/common';
@Directive({
selector:'[ngModel][ssn]',
host:{
'(ngModelChange)':'onInputChange($event)',
'(keydown.backspace)':'onInputChange($event.target.value,true)'
}
})
export class SsnMask{
constructor(public model: NgControl){}
@Output() rawChange:EventEmitter<string> = new EventEmitter<string>();
onInputChange(event,backspace){
var newVal=event.replace(/\D/g,'');
var rawValue= newVal;
if(backspace){
newVal=newVal.substring(0, newVal.length);
}
if(newVal.length==0){
newVal='';
}
else if(newVal.length<=3){
newVal=newVal.replace(/^(\d{0,3})/, '$1');
}
else if(newVal.length <=6){
newVal=newVal.replace(/^(\d{0,3})(\d{0,2})/, '$1-$2');
}
else if(newVal.length<=9){
newVal=newVal.replace(/^(\d{0,3})(\d{0,2})(\d{0,4})/, '$1-$2-$3')
}
this.model.valueAccessor.writeValue(newVal);
this.rawChange.emit(rawValue);
}
}