Форматируйте записи телефонных номеров с помощью googlelibphonenumer и каналов angular по мере ввода

Question

Ожидаемый конечный результат: форматируйте числовые записи в формате 999-999-9999 по мере ввода и ограничивайте ввод более чем 10 цифрами

Я могу добиться этого, используя регулярные выражения

может ли кто-нибудь помочь мне добиться того же, используя google-libphonenumber и angular pipe

// html input type = "tel" id = "phoneNum" [(ngModel)] = "phoneNo" (keyup ) = "onInputChange ()"

---

export class PhoneComponent implements OnInit{
    phoneNo : string = "9876543210";

    onInputChange() {
        let newVal = this.phoneNo.replace(/\D/g, '');
        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.phoneNo = newVal;
        console.log('input : ' + newVal);
    }

}

Answer 1

npm i google-libphonenumber@latest --save

npm i @ types / google-libphonenumber@latest --save-dev

убедитесь, что в tsconfig внутри параметров компилятора у вас есть это : -

"typeRoots": [
            "node_modules/@types"
        ]

Код трубы: -

import { Pipe, PipeTransform } from '@angular/core';
import { PhoneNumberUtil, PhoneNumberFormat } from 'google-libphonenumber';
@Pipe({
  name: 'phoneformat'
})
export class PhonePipe implements PipeTransform {

  transform(value: any, args?: any): any {
    //return (formatting code from googlephonelib)
  }
}

Пример шаблона: -

<hello name="{{ name }}"></hello>
<input type="text" [(ngModel)]="phone">
<div>{{phone | phoneformat}}</div>