web-dev-qa-db-ja.com

Angular2 {pipes}-電話番号のフォーマット方法

私はあちこち検索しましたが、電話番号のフォーマットに関する特定の情報を見つけることができません。

現在、私は次の形式でJSONから電話番号を取得しています。

25565115

しかし、私はこの結果を達成したい：

02-55-65-115

そのためには、カスタムパイプを使用する必要があると思いますが、それを自動的に実行する組み込みのパイプがあるとは考えていません。

方法を教えてください。

angularpipes-filters
18
Hamza L.

[〜＃〜] plunker [〜＃〜]

[〜＃〜] ts [〜＃〜]のpipe実装は次のようになります

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

改善できる点はたくさんありますが、この特定のケースで機能するようにしました。

18
Ankit Singh

「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();
    }
}
14
Robert Kehoe

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」にフォーマットします

これが誰かを助けることを願っています！

9
totallytotallyamazing

この記事libphonenumber と呼ばれるGoogleのlibを使用してそれを行う方法を示しました。彼らは多くの異なる言語でこのライブラリを使用しており、非常に幅広いサポートを持っているようです（リンクは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;
  }

}

このライブラリを使用して、さまざまな方法を実装できます。たくさんの便利な方法がありますので、読んで自分に合っているかどうかを確認してください。

あなたが好きなら、親指を立てます。 =]

4
giovannipds

カスタムの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/

2
user5975786