angular-libphonenumber

Nathan Hammond's libphonenumber ported to an angular filter

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
angular-libphonenumber
4181.1.07 years ago7 years agoMinified + gzip package size for angular-libphonenumber in KB

Readme

angular-libphonenumber - AngularJS input masks for phone numbers
| Info | Badges | | ------------- | ------------- | | Version | !Bower versionbower-imagebower-url !NPM versionnpm-imagenpm-url | | License | !Apache licenselicense-imagelicense-url | | Testing | !Build Statusbuild-imagebuild-url !Coverage Statuscoverage-imagecoverage-url | | Quality | !Dependencies statusdep-status-imagedep-status-url !Code Climatecode-climate-imagecode-climate-url |

Description

angular-libphonenumber is an angular directive that can be used as an input mask. By default, all numbers are formatted in US format, but the format can be set with the country-code descriptor. It uses nathanhammond/libphonenumber as a formatter for phone number's, which calls Google's libphonenumber to format numbers as you type them.
View a demo here

Installation

Using Bower:
bower install --save angular-libphonenumber

You then must decide what version of libphonenumber you want. There are two included, and you must include one of them in your application before angular-libphonenumber:
  • dist/libphonenumber.js - only includes the libphonenumber code needed for typeahead to work
  • dist/libphonenumber.full.js - includes all libphonenumber functionality including typeahead

<!-- Use either -->
<script src="./<path_to_bower_components>/angular-libphonenumber/dist/libphonenumber.full.js" />
<!-- OR -->
<script src="./<path_to_bower_components>/angular-libphonenumber/dist/libphonenumber.js" />
<!-- THEN -->
<script src="./<path_to_bower_components>/angular-libphonenumber/dist/angular-libphonenumber.min.js" />

Then include it in your angular application:
angular.module('myModule', ['cwill747.phonenumber']);

How to Use

  • You need to get the user's country code from somewhere. Where you do that is up to you (setting,
local storage, angular-translate, or just another input box):
<input type="text" ng-model="countrycode" />

  • Then you just apply the input mask to any input box:

<input type="text" ng-model="phoneNumber" phone-number country-code="countrycode" />

Support

If you are having any questions or issues getting things to work, you can:

Project's issue on GitHub should be used discuss bugs and features.

Contributing to the project

We welcome any contributions to the project. Please check the CONTRIBUTING.md for contribution guidelines.
Check out our contributors here

Development

Prepare your environment

  • Install Node.js and NPM (should come with)
  • Install global dev dependencies: npm install -g gulp karma
  • Install local dev dependencies: npm install while current directory is angular-libphonenumber repo

Build

  • Build the whole project: gulp - this will run jshint, test, and build targets

Release

  • Use GitHub's release tool to draft and publish a release. I like the format better than
changelogs.