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.
- Gives us a list of countries to populate the 'drop down' with
- 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.
- 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.
Adds in a search ability, as navigating that dropdown is very hard.
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.
Same as intl-tel-input except for search:
- .country-search : Div wrapper around search input.