Angular 4绑定时将表单输入值更改为＃

Question

I am trying to mimic what is done with passwords, where whatever an user types, it is substituted by ••••••• , except that I want to do this for numbers and only show the last four numbers. So far I have the events in my @Directive that capture the keystrokes, but don't actually emit or propagate any change up the stream (in the input) to change the value.

Ex. #####1234

   <input id="indTaxId" type="text" name="indTaxId"
      [(ngModel)]="payLoadService.individual.taxId"
      required maxlength="9" pattern="^[0-9]{9}$"
      [lastFourDirective]="payLoadService.individual.taxId"
    (lastFourDirectiveOutput)="payLoadService.individual.taxId"
   />

last-four.directive.ts

@Directive({
  selector: '[lastFourDirective]'
})

export class LastFourDirective implements OnInit {

  private el: HTMLInputElement;

  constructor(
      private elementRef: ElementRef
  ) {
    this.el = this.elementRef.nativeElement;
  }

  ngOnInit() {
  }

  @Input() lastFourDirective: string;

  @HostListener('blur', ['$event.target.value'])
  onBlur(value) {
    console.log("blur", value);
   return this.lastFourDigits(value)
  }

  @HostListener('keyup', ['$event.target.value'])
  onKeyup(value) {
    console.log("keyup", value);
    return this.lastFourDigits(value)
  }

  private lastFourDigits(taxId: string) {
    return taxId.replace(/\d(?=\d{4})/g, '#')
  }
}

How can I accomplish this?

PS: I'm not using formControl, above is a sample of my input.

Answer 1

You are using a directive so certainly there is a global need for you to do this in your application. I haven't worked on angular4 (I really thought, somehow I could use a filter here but was unable) but if there isn't a global need for this kind of input box, why don't you write a function in your component itself and trigger it on (keyup) and (blur) events. For example:

<input id="indTaxId" type="text" name="indTaxId"
       [(ngModel)]= payLoadService.individual.taxId
       required maxlength="9" pattern="^[0-9]{9}$"
       (keyup)="foo()"
       (blur)="foo()"
/>

and in your component:

foo() {
    this.payLoadService.individual.taxId = this.payLoadService.individual.taxId.replace(/\d(?=\d{4})/g, '#');
}

Now I don't have an answer if you want to implement through a directive, but I can suggest you another solution if you want this functionality at multiple places, you can make a password input component containing only this functionality ie only the input box and use this component wherever you want such input boxes.