Angular2 {pipes} - Как отформатировать номер телефона?

Ответ 1

PLUNKER

pipe реализация в TS будет выглядеть следующим образом

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

Использование:

import {Component} from 'angular2/core';

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

Есть много вещей, которые можно улучшить, я просто сделал это для этого конкретного случая.

Ответ 2

Основываясь на "user5975786", здесь тот же код для 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();
    }
}

Ответ 3

При форматировании телефонных номеров из службы данных JSON это было самым простым решением, о котором я мог подумать.

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

Это приведет к форматированию "25565115" в "02-55-65-115"

Надеюсь, это поможет кому-то!

Ответ 4

Вы можете использовать что-то подобное в пользовательском конвейере Angular2:

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

Для получения дополнительной информации просмотрите этот файл AngularJS, но, как я уже сказал, вам нужно преобразовать его в Angular2:

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

Ответ 5

Я только что натолкнулся на эту статью, показывающую, как это сделать, используя библиотеку Google с именем libphonenumber. Кажется, они используют эту библиотеку во многих разных языках и имеют очень широкую поддержку (ссылка только на версию пакета JS). Вот как я реализовал это для португальских/бразильских телефонных номеров:

Первый:

npm i libphonenumber-js

Затем:

# if you're using Ionic
ionic generate pipe Phone

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

В заключение:

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

}

Вы можете реализовать много разных способов с этой библиотекой. Там много, много удобных методов, вы можете просто прочитать и посмотреть, как вам это подходит.

Недурно, если вам понравилось. знак равно