ngx-intl-tel-email-input-input v1.0.0
International Telephone Input for Angular (NgxIntlTelInput)
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.
Supports:
- Angular 7
- ReactiveFormsModule
- FormsModule
- Validation with google-libphonenumber
Installation
Install Dependencies
$ npm install intl-tel-email-input --save
$ npm install google-libphonenumber --save
$ ng add ngx-bootstrap
Add Dependency Style
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/ngx-bootstrap/datepicker/bs-datepicker.css",
"./node_modules/intl-tel-input/build/css/intlTelInput.css",
"src/styles.css"
],Install This Library
$ npm install ngx-intl-tel-email-input --save
Usage
Import
Add BsDropDownModule and NgxIntlTelInputModule to your module file:
imports: [
BsDropdownModule.forRoot(),
NgxIntlTelInputModule,
]Example
Refer to main app in this repository for working example.
<form #f="ngForm" [formGroup]="phoneForm">
<ngx-intl-tel-email-input
[cssClass]="'custom'"
[preferredCountries]="['us', 'gb']"
[onlyCountries]="['us', 'gb', 'es']"
[enableAutoCountrySelect]="true"
[enablePlaceholder]="true"
name="phone"
formControlName="phone"></ngx-intl-tel-email-input>
</form>Options
| Options | Type | Default | Description |
|---|---|---|---|
| cssClass | string | control-form | Bootstrap input css class or your own custom one. |
| preferredCountries | string[] | [] | List of country abbreviations, which will appear at the top. |
| onlyCountries | string[] | [] | List of manually selected country abbreviations, 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 addapts to the country selected. |
Library Contributions
- Fork repo.
- Update
./projects/ngx-intl-tel-email-input - Build / test library.
- Update
./src/appwith new functionality. - Update README.md
- Pull request.
Helpful commands
- Build lib:
$ npm run build_lib - Copy license and readme files:
$ npm run copy-files - Create package:
$ npm run npm_pack - Build lib and create package:
$ npm run package
Use localy
After building and creating package, you can use it localy too.
In your project run:
$ npm install --save {{path to your local '*.tgz' package file}}