Question

我试图模仿密码所做的事情，无论用户输入什么，它都被•••••••取代，除了我想对数字执行此操作，只显示最后四个数字。到目前为止，我的@Directive中的事件捕获了击键，但实际上并未在流中（在输入中）发出或传播任何更改以更改值。

实施例。 #####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"
   />

最后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, '#')
  }
}

我该如何做到这一点？

PS：我没有使用formControl，上面是我输入的一个示例。

Answer 1

您正在使用指令，因此您需要在应用程序中执行此操作。我还没有使用angular4（我真的想过，不知怎的，我可以在这里使用filter但是无法使用）但是如果没有这种输入框的全局需求，你为什么不写一个在组件本身中运行并在(keyup) and (blur)事件上触发它。例如：

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

并在您的组件中：

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

如果您想通过指令实现我现在没有答案，但如果您希望在多个地方使用此功能，我可以建议您另一个解决方案，您可以使password input component仅包含此功能，即只有input box并在任何你想要这样的输入框的地方使用这个组件。

Angular 4在绑定时将输入值转换为＃

1 个答案: