Phone Angular 8 中的掩码指令

Question

我有这个 phone 掩码指令，它接受美国格式的 phone 号码。但是，当我通过按退格键一个一个地清除输入中的内容时，输入表单中的值不会被清空。直到我记录了表单的输入值，我才意识到这个问题。

而且，当我立即清除输入表单时，它正在被清空。但是，按退格键逐个清除表格值总是留下一个值。

表单值为空时如何清空输入值？

我使用 StackBlitz 创建了一个工作示例。有人可以帮忙吗？

指令

export class PhoneMaskDirective {
  constructor(public ngControl: NgControl) {}

  @HostListener("ngModelChange", ["$event"])
  onModelChange(event) {
    this.onInputChange(event, false);
  }

  @HostListener("keydown.backspace", ["$event"])
  keydownBackspace(event) {
    this.onInputChange(event.target.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})/, "()");
    } else if (newVal.length <= 6) {
      newVal = newVal.replace(/^(\d{0,3})(\d{0,3})/, "() ");
    } else if (newVal.length <= 10) {
      newVal = newVal.replace(/^(\d{0,3})(\d{0,3})(\d{0,4})/, "() -");
    }
    this.ngControl.valueAccessor.writeValue(newVal);
  }
}

Answer 1

推荐的方法是使用 @HostBindings 和 @HostListeners 而不是 host 属性

删除 host 并添加 @HostListener

@HostListener('ngModelChange', ['$event'])
  onModelChange(event) {
    this.onInputChange(event, false);
  }

  @HostListener('keydown.backspace', ['$event'])
  keydownBackspace(event) {
    this.onInputChange(event.target.value, true);
  }

Answer 2

当输入值长度 === 0 且 valueAccessor.writevalue 时，您的问题可能设置为空值，这在此处不起作用。

你能代替这个吗

this.ngControl.control.setValue(null);

而不是

this.ngControl.valueAccessor.writeValue(null);

参考：https://stackblitz.com/edit/angular6-phone-mask-4rzs1k?file=app%2Fphone-mask.directive.ts

Phone Angular 8 中的掩码指令

Phone mask directive in Angular 8

javascript

regex

typescript

angular-directive

angular