atscub / intlpnIonic

Simple version of intl-phone number input for Ionic

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.

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

Note from the original author

Implemenation is dirty for now, as i need that as soon as possible.

Getting Started

1. Install the package

npm install "git+https://github.com/abrahamtoledo/intlpnIonic.git#v0.4.0" --save

or include it in your project dependencies.

2. Link the stylesheet in index.html

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

3. Import the library into the module where it is going to be used

import "path/to/intlpnIonic.js";

4. load the directive

export default angular
    .module('myApp', [
        'ionic',
        'intlpnIonic', 
        ...
        ]
    )...

5. Usit in your template

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

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

<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
• close-icon-spec: Specification for the close icon to use in search country modal . Some icons can contain multiple layers. An example inconspec is {cls: 'icon icon-close', paths: ['path1', 'path2', ...]}, for multilayer icons. For single layer icons leave it as paths: []
• search-icon-spec: Icon spec for search button. See close-icon-spec.

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"
    close-icon-spec="{cls: 'icon icon-close', paths: ['path1', 'path2']}"
    search-icon-spec="{cls: 'icon icon-search', paths: ['path1', 'path2', 'path2']}"
    >
</intlpn>

Attributions

• Original repo pierre-vigier/intlpnIonic.
• All the logic in managing flag and dialCode from intl-tel-input.
• Formatting/validation/example number code from libphonenumber.