以 Angular 格式格式化电话号码输入

Question

我已经看到许多在 Angularjs 中格式化电话号码输入字段的解决方案，但我在 Angular 7 上找不到任何内容。我本质上想要的是让用户在文本字段中输入以下内容：

123456789

以及用于将输入格式化为的文本字段：

(123) 456-789

我该怎么做呢？我找到了以下正则表达式来验证它：

^(\([0-9]{3}\) |[0-9]{3}-)[0-9]{3}-[0-9]{4}$

Answer 1

您可以使用电话掩码指令处理此问题，如下所示，

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) {
    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);
  }
}

STACKBLITZ 演示

Answer 2

您可以轻松安装ngx-mask包，然后像这样指定理想的掩码：

mask="(000) 000-000"

< input type="text" mask="(000) 000-000" />