web-dev-qa-db-fra.com

Angular2 {pipes} - Comment formater un numéro de téléphone?

J'ai cherché ici et là et je ne trouve rien de spécifique sur le formatage d'un numéro de téléphone.

Actuellement, je récupère des numéros de téléphone sous forme de JSON au format suivant:

25565115

Cependant, je veux atteindre ce résultat:

02-55-65-115

Pour cela, je crois que je dois utiliser un tuyau personnalisé et je ne pense pas qu'il y en ait un intégré qui le fasse automatiquement.

Pouvez-vous me donner quelques conseils sur la façon de procéder?

angularpipes-filters
18
Hamza L.

PLONGEUR

pipe implémentation dans [~ # ~] ts [~ # ~] ressemblerait à ceci

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

Usage:

import {Component} from 'angular2/core';

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

Il y a beaucoup de choses qui peuvent être améliorées, je viens de le faire fonctionner pour ce cas particulier.

18
Ankit Singh

En s'appuyant sur "user5975786", voici le même code pour 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();
    }
}
14
Robert Kehoe

Lors du formatage des numéros de téléphone à partir d'un service de données JSON, c'était la solution la plus simple à laquelle je pouvais penser.

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

Cela formatera "25565115" en "02-55-65-115"

J'espère que cela aide quelqu'un!

9
totallytotallyamazing

Je me suis juste cogné sur cet article montrant comment faire cela en utilisant un lib de Google appelé libphonenumber . Il semble qu'ils utilisent cette lib dans de nombreuses langues différentes et a un support très large (le lien est juste vers la version du package JS). Voici comment je l'ai implémenté sur les numéros de téléphone portugais/brésiliens:

D'abord: 

npm i libphonenumber-js

Ensuite: 

# if you're using Ionic
ionic generate pipe Phone

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

Enfin: 

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

}

Vous pouvez implémenter de nombreuses manières différentes avec cette lib. Il existe de nombreuses méthodes pratiques, vous pouvez simplement aller lire et voir comment cela vous convient.

Bravo si vous avez aimé. =]

4
giovannipds

Vous pouvez utiliser quelque chose comme ça dans un tube Angular2 personnalisé:

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

Consultez cet AngularJS pour plus d'informations, mais comme je l'ai dit, vous devez le convertir en Angular2:

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

2
user5975786