时间戳

首页 > 解决方案 > 在您键入时使用 googlelibphonenumer 和角管道格式化电话号码条目

angular - 在您键入时使用 googlelibphonenumer 和角管道格式化电话号码条目

问题描述

预期的最终结果：在您键入时将数字条目格式化为 999-999-9999 格式，并将条目限制为 10 位以上

我可以使用 requular experessions 来实现这一点

有人可以帮助我使用 google-libphonenumber 和角管道实现相同的目标吗

//html 输入类型="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);
    }

}

标签： angulartypescript

解决方案

npm i google-libphonenumber@latest --save

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

make sure in tsconfig inside compiler options you have this :- 

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

Pipe Code :- 

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

Example template :- 

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

推荐阅读