Angular International Telephone Input Mini
A simple Angular 1 directive for Telephone input based off of intl-tel-input, with no jquery.
How it works
This library pulls in 2 important parts of the intl-tel-input library.
- src/js/data.js
- Gives us a list of countries to populate the 'drop down' with
- build/js/utils.js
- A compiled wrapper around Google's libphonenumber.
These get bundled into this library. We then mimic the layout of an input element from intl-tel-input.
Why
- I don't want jQuery included in my angular project. Other angular wrappers for intl-tel-input still require you import jQuery.
- I don't need all the features of intl-tel-input.
- intl-tel-input has done some great work on wrapping libphonenumber and compiling a list of countries + dial codes that doesn't need to be redone.
- Why not go vanilla javascript? Time. But you can help the main project Remove jQuery Dependencies.
Additions
Adds in a search ability, as navigating that dropdown is very hard.
Using It
Import it:
var myApp = angular;
Create the directive:
on-number-validity-check : Callback for when we perform a validity check. Populates 3 variables
* $isValid: boolean - true if the number is considered valid.
* $error: int - the error code for the number
* $phoneNumber: string - a formated number in the style of INTERNATIONAL
* $inputVal: string - the value put into the text box
show-search : If we should add in the search option to the input.
country : The default country we should use. This variable will be updated as the country gets changed.
Styling
Same as intl-tel-input except for search:
- .country-search : Div wrapper around search input.
License
This code: MIT. See libphonenumber and intl-tel-input for their licenses.