AngularJS input masks for phone numbers
angular-libphonenumber -Info | Badges |
---|---|
Version | |
License | |
Testing | |
Quality |
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:
- Ask a question in stackoverflow under the angular-libphonenumber tag.
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 runjshint
,test
, andbuild
targets
Release
- Use GitHub's release tool to draft and publish a release. I like the format better than changelogs.