page - Angular2{tuberías}-¿Cómo formatear un número de teléfono?

router events angular 6

Question

He buscado aquí y allá, y no puedo encontrar algo específico sobre el formato de un número de teléfono.

Actualmente, estoy recuperando números de teléfono de un JSON en el siguiente formato:

25565115

Sin embargo, quiero lograr este resultado:

02-55-65-115

Para eso, creo que necesito usar un tubo personalizado y no creo que haya uno incorporado que lo haga automáticamente.

¿Me puede dar alguna orientación sobre cómo hacerlo?

Answer 1

Acabo de encontrarme con este artículo que muestra cómo hacerlo utilizando una libphonenumber Google llamada libphonenumber . Parece que usan esta biblioteca en muchos idiomas diferentes y tiene un soporte muy amplio (el enlace es solo para la versión del paquete JS). Así es como lo he implementado en los números de teléfono portugueses / brasileños:

Primero:

npm i libphonenumber-js

Entonces:

# if you''re using Ionic
ionic generate pipe Phone
# if you''re just using Angular
ng generate pipe Phone

Finalmente:

import { Pipe, PipeTransform } from ''@angular/core'';
import { parsePhoneNumber } from ''libphonenumber-js'';
@Pipe({
name: ''phone''
})
export class PhonePipe implements PipeTransform {
transform(phoneValue: number | string): string {
const stringPhone = phoneValue + '''';
const phoneNumber = parsePhoneNumber(stringPhone, ''BR'');
const formatted = phoneNumber.formatNational();
return formatted;
}
}

Puedes implementar muchas formas diferentes con esta lib. Hay muchos, muchos métodos prácticos, puedes ir a leer y ver cómo te conviene.

Pulgar arriba si te ha gustado. =]

Answer 2

Al formatear números de teléfono de un servicio de datos JSON, esta fue la solución más simple que pude imaginar.

<p>0{{contact.phone.home | slice:0:1}}-{{contact.phone.home | slice:1:3}}-{{contact.phone.home | slice:3:5}}-{{contact.phone.home | slice:5:8}}</p>

Esto formateará "25565115" en "02-55-65-115"

¡Espero que esto ayude a alguien!

Answer 3

Puedes usar algo así en una tubería Angular2 personalizada:

switch (value.length) {
case 10:
country = 1;
city = value.slice(0, 3);
number = value.slice(3);
break;
case 11:
country = value[0];
city = value.slice(1, 4);
number = value.slice(4);
break;
case 12:
country = value.slice(0, 3);
city = value.slice(3, 5);
number = value.slice(5);
break;
default:
return tel;
}

Revisa este AngularJS para más información, pero como dije, necesitas convertirlo a Angular2:

http://jsfiddle.net/jorgecas99/S7aSj/

Answer 4

Sobre la base de "user5975786", aquí está el mismo código para Angular2

import { Injectable, Pipe } from ''@angular/core'';
@Pipe({
name: ''phone''
})
export class PhonePipe
{
transform(tel, args)
{
var value = tel.toString().trim().replace(/^/+/, '''');
if (value.match(/[^0-9]/)) {
return tel;
}
var country, city, number;
switch (value.length) {
case 10: // +1PPP####### -> C (PPP) ###-####
country = 1;
city = value.slice(0, 3);
number = value.slice(3);
break;
case 11: // +CPPP####### -> CCC (PP) ###-####
country = value[0];
city = value.slice(1, 4);
number = value.slice(4);
break;
case 12: // +CCCPP####### -> CCC (PP) ###-####
country = value.slice(0, 3);
city = value.slice(3, 5);
number = value.slice(5);
break;
default:
return tel;
}
if (country == 1) {
country = "";
}
number = number.slice(0, 3) + ''-'' + number.slice(3);
return (country + " (" + city + ") " + number).trim();
}
}

Answer 5

PLUNKER

Implementación de pipe en TS se vería así

import {Pipe} from ''angular2/core'';
@Pipe({
name: ''phone''
})
export class PhonePipe{
transform(val, args) {
val = val.charAt(0) != 0 ? ''0'' + val : '''' + val;
let newStr = '''';
for(i=0; i < (Math.floor(val.length/2) - 1); i++){
newStr = newStr+ val.substr(i*2, 2) + ''-'';
}
return newStr+ val.substr(i*2);
}
}

Uso:

import {Component} from ''angular2/core'';
@Component({
selector: ''demo-app'',
template: ''<p>{{myNumber | phone }}</p>'',
pipes: [PhonePipe]
})
export class App {
constructor() {
this.myNumber= ''25565115'';
}
}

Hay muchas cosas que pueden mejorarse, simplemente lo hice funcionar para este caso en particular.