web-dev-qa-db-ja.com

電話番号入力のフォーマットAngular

Angularjsで電話番号入力フィールドをフォーマットするための多くの解決策を見てきましたが、Angular 7.には何も見つかりません。ユーザーがテキストフィールドに次のように入力することを本質的に望んでいます。

123456789

そして、テキストフィールドが入力を次のようにフォーマットします：

（123）456-789

どうすればこれを行うことができますか？それを検証する次の正規表現を見つけました：

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

これにはマテリアルUIを使用しています。私が試したのは次のことです：

<input appPhoneMask matInput placeholder="Phone" formControlName="phone" >

@Sajeetharanの電話マスクファイルを使用します。これは通常のHTML入力で機能しますが、matInputの場合は何もしません。

私はAngularを初めて使用するので、どんな助けでも大歓迎です。

angulartypescriptformatphone-number
2
Jack

これは、次のようにPhone Maskディレクティブで処理できます。

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

スタックブリッツデモ

4
Sajeetharan