Skip to content

Simple version of intl-phone number input for Ionic

License

Notifications You must be signed in to change notification settings

atscub/intlpnIonic

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

67 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

  1. Link the stylesheet in index.html
<link rel="stylesheet" href="path/to/intlpn.css">
  1. Import the library into the module where it is going to be used
import "path/to/intlpnIonic.js";
  1. load the directive
export default angular
    .module('myApp', [
        'ionic',
        'intlpnIonic', 
        ...
        ]
    )...
  1. Usit in your template
<intlpn 
    ng-model="phone.number" 
    placeholder="placeholder" 
    only-country="['us','fr']">
</intlpn>
  1. 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

About

Simple version of intl-phone number input for Ionic

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 63.1%
  • CSS 36.9%