intlpnIonic

Simple version of intl-phone number input for Ionic

Heavily based on https://github.com/Bluefieldscom/intl-tel-input

Using https://github.com/Bluefieldscom/intl-tel-input inside Ionic framework creates incompatibilities, as by default, Ionic will handle scroll event which makes the phone number plugin not working, as the popup to choose a country is not scrollable. Implemenation is dirty for now, as i need that as soon as possible.

There is as well a filter to format a number in either international or national mode.

Getting Started

1. Install the requirements

bower install https://github.com/pierre-vigier/intlpnIonic.git#0.1.12 --save

2. Link the stylesheet

<link rel="stylesheet" href="path/to/intlpn.css">

3. Add the javascripts

<script src="path/to/intlpnIonic.js"></script>
<script src="path/to/data.js"></script>
<script src="path/to/lib/libphonenumber/build/utils.js"></script>

4. load the directive and use it

var app = angular.module('myApp', ['ionic','intlpnIonic'])...

<intlpn ng-model="phone.number" placeholder="placeholder" only-country="['us','fr']"></intlpn>

5. for formatting a number, use filter intlpnFormat, default international mode

var app = angular.module('myApp', ['ionic','intlpnIonic'])...

<span>{{ model.phoneNUmber | intlpnFormat }}</span><!-- number will be in internaional mode -->
<span>{{ model.phoneNUmber | intlpnFormat:'national' }}</span><!-- number will be in national mode -->

Configurations

A set of options can be passed to the component:

• ng-model: model to store the phone number in, will be set only on valid number (verified by google phonenumber utils)
• placeholder: Placeholder of the input
• default-country: Country selected by default
• only-country: to restrain the list of available countries, if not given full list, format : ['fr','cn']
• national-node: true: allow user to input phone number in national mode (without + and the international code)
• box-header-class: Class of the header bar of the modal to select countries
• box-header-title: Title of the modal to select countries
• search-placeholder: placeholder text of the search box in the header to select countries
• country-iso-code: you can bind a scope variable here, that will be updated with the current iso code of the selected country, read-only
• country-dial-code: you can bind a scope variable here, that will be updated with the current dial code of the selected country, read-only

Sample code:

<intlpn ng-model="model.field" placeholder="Placeholder" default-country="fr" only-country="['fr','cn','us','it']" national-mode="true" box-header-class="bar-energized" box-header-title="Search country" search-placeholder="search" country-iso-code="model.isocode" country-dial-code="model.dialcode"></intlpn>

Live example here: http://play.ionic.io/app/6d0a3832cc50

Attributions

• All the logic in managing flag and dialCode from intl-tel-input
• Formatting/validation/example number code from libphonenumber