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.