Phone number input field to support international numbers, Angular
An Angular package for entering and validating international telephone numbers. It adds a flag dropdown to any input, detects the user's country, displays a relevant placeholder and provides formatting/validation methods.
Compatibility:
Validation with google-libphonenumber
| ngx-intl-tel-input | Angular | ngx-bootstrap | | ------------------ | -------------- | ------------- | | 3.x.x | 9.x.x - 10.x.x | 6.0.0 | | 2.x.x | 8.x.x - 9.1.x | 5.6.x |
$ npm install [email protected] --save
$ npm install google-libphonenumber --save
$ ng add ngx-bootstrap
Add 'intl-tel-input' style file:
./node_modules/intl-tel-input/build/css/intlTelInput.css
to angular.json styles array:
"styles": [ "./node_modules/bootstrap/dist/css/bootstrap.min.css", "./node_modules/intl-tel-input/build/css/intlTelInput.css", "src/styles.css" ],
$ npm install ngx-intl-tel-input --save
Add
NgxIntlTelInputModuleto your module file:
imports: [NgxIntlTelInputModule];
Refer to main app in this repository for working example.
Or this:
| Options | Type | Default | Description | | ------------------------ | ------------------------ | --------------------------------- | ------------------------------------------------------------------------------------------------------------- | | cssClass |
string|
control-form| Bootstrap input css class or your own custom one. | | preferredCountries |
[]|
[]| List of countries, which will appear at the top. | | onlyCountries |
[]|
[]| List of manually selected countries, which will appear in the dropdown. | | enableAutoCountrySelect |
boolean|
false| Toggle automatic country (flag) selection based on user input. | | enablePlaceholder |
boolean|
true| Input placeholder text, which adapts to the country selected. | | customPlaceholder |
string|
None| Custom string to be inserted as a placeholder. | | numberFormat | |
PhoneNumberFormat.International| Custom string to be inserted as a placeholder. | | searchCountryFlag |
boolean|
false| Enables input search box for countries in the flag dropdown. | | searchCountryField |
[]|
[SearchCountryField.All]| Customize which fields to search in, if
searchCountryFlagis enabled. Use
SearchCountryFieldhelper enum. | | searchCountryPlaceholder |
string|
'Search Country'| Placeholder value for
searchCountryField| | maxLength |
number|
None| Add character limit. | | tooltipField | |
None| Set tooltip on flag hover. Use
TooltipLabelhelper enum for label type options. | | selectFirstCountry |
boolean|
true| Selects first country from
preferredCountriesif is set. If not then uses main list. | | phoneValidation |
boolean|
true| Disable phone validation. | | inputId |
string|
phone| Unique ID for element. | | selectedCountryISO | |
None| Set specific country on load. | | separateDialCode |
boolean|
false| Visually separate dialcode into the drop down element. | | countryChange | |
None| Emits country value when the user selects a country from the dropdown. |
Following formats are supported
./projects/ngx-intl-tel-input
./src/appwith new functionality.
$ npm run build_lib
$ npm run copy-files
$ npm run npm_pack
$ npm run package
After building and creating package, you can use it locally too.
In your project run:
$ npm install --save {{path to your local '*.tgz' package file}}
Thanks goes to these wonderful people (emoji key):
webcat_black 🎨 💻 📖 🤔 💬 🚇 💡 🚧 👀 ⚠️ |
Aleksandr Pasevin 💻 📖 🐛 📦 🔌 💬 🚇 💡 🚧 👀 ⚠️ |
Dviejo 💻 🐛 💡 ⚠️ 💬 🚧 👀 |
Jens Wagner 💻 |
Kino Roy 💻 |
Nathan Walker 🚧 💻 |
Jiarong Xu 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!