it-swarm.com.de

Angular2 {pipes} - Wie formatiere ich eine Telefonnummer?

Ich habe hier und da gesucht und kann nichts Spezielles zum Formatieren einer Telefonnummer finden.

Derzeit rufe ich Telefonnummern aus einem JSON im folgenden Format ab:

25565115

Dieses Ergebnis möchte ich jedoch erreichen:

02-55-65-115

Dafür glaube ich, dass ich ein benutzerdefiniertes Rohr verwenden muss und ich glaube nicht, dass es ein eingebautes gibt, das dies automatisch erledigt.

Können Sie mir bitte eine Anleitung geben, wie das geht?

18
Hamza L.

PLUNKER

pipe Implementierung in [~ # ~] ts [~ # ~] würde so aussehen

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

Verwendung:

import {Component} from 'angular2/core';

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

Es gibt viele Dinge, die verbessert werden können. Ich habe es gerade für diesen speziellen Fall zum Laufen gebracht.

18
Ankit Singh

Aufbauend auf "user5975786" ist hier der gleiche Code für 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

Beim Formatieren von Telefonnummern aus einem JSON-Datendienst war dies die einfachste Lösung, die ich mir vorstellen konnte.

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

Dadurch wird "25565115" in "02-55-65-115" formatiert.

Hoffe das hilft jemandem!

Ich habe mich gerade auf diesen Artikel gestoßen und gezeigt, wie das mit einer Google-Bibliothek namens libphonenumber gemacht werden kann . Es scheint, dass sie diese Bibliothek in vielen verschiedenen Sprachen verwenden und eine sehr breite Unterstützung haben (der Link bezieht sich nur auf die JS-Paketversion). So habe ich es für portugiesisch/brasilianische Telefonnummern implementiert:

Zuerst:

npm i libphonenumber-js

Dann:

# if you're using Ionic
ionic generate pipe Phone

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

Endlich:

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

}

Sie können mit dieser Bibliothek viele verschiedene Möglichkeiten implementieren. Es gibt viele, viele praktische Methoden, Sie können einfach lesen und sehen, wie es zu Ihnen passt.

Daumen hoch , wenn Sie möchten. =]

4
giovannipds

Sie können so etwas in einer benutzerdefinierten Angular2-Pipe verwenden:

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

Sehen Sie sich dieses AngularJS an, um weitere Informationen zu erhalten, aber wie gesagt, müssen Sie es in Angular2 konvertieren:

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

2
user5975786