Skip to content

Latest commit

 

History

History
72 lines (56 loc) · 3.15 KB

README.md

File metadata and controls

72 lines (56 loc) · 3.15 KB
Raw

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
  1. Link the stylesheet
<link rel="stylesheet" href="path/to/intlpn.css">
  1. 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>
  1. 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>
  1. 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