javascript - @HostListener 用于自动填充 Angular 中的输入字段

Question

在我选择自动填充的表单上，所有input字段都填充有我在电话号码 input字段中遇到问题的值。填充的值1233211232使用自动填充。

[phone]我有一个自定义指令，只要用户在input字段中手动输入，它就会将电话号码转换为这种格式。但是使用自动填充，该@HostListener块似乎不起作用。如何检测input现场的变化？

export class PhoneDirective {

  constructor(public ngControl: NgControl) {}

  @HostListener('click', [`$event.target`])
  onClickCalled(event) {
    this.onInputChange(event.value, true);
  }

  onInputChange(event, backspace) {
    if (event == null) {
      return '';
    }
    let newVal = event.replace(/\D/g, '');
    if (backspace && newVal.length <= 6) {
      newVal = newVal.substring(0, newVal.length - 1);
    }
    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,3})/, '($1) $2');
    } else if (newVal.length <= 10) {
      newVal = newVal.replace(/^(\d{0,3})(\d{0,3})(\d{0,4})/, '($1) $2-$3');
    } else {
      newVal = newVal.substring(0, 10);
      newVal = newVal.replace(/^(\d{0,3})(\d{0,3})(\d{0,4})/, '($1) $2-$3');
    }
    this.ngControl.valueAccessor.writeValue(newVal);
  }
}

这是我正在使用的电话号码的正则表达式

const isPhoneNumberValid = (/(\W|^)[(](?!000)\d{3}[)]{0,1}[\s-]{0,1}\d{3}[\s-]{0,1}\d{4}(\W|$)/).test(control.value);

有人可以帮忙吗？

标签： javascripthtmlangular