An Angular plugin for telephone input that validates phone numbers and provides both national and international formatting.
npm install ngx-intl-telephone-input(both national and international) phone numbers and triggers an event on every keystroke. (See Sample Output to have a better idea about event triggered).
first one being dependencies. The package itself is inspired from NgxIntlTelInput (Do check them as well), that has 2 dependencies but this package has only 1 dependency and that too for formatting and validations. The dependency size is also small.
second one is the way Ngx-Intl-Telephone-Input formats user input. It comes with _As You Type Formatting_ that formats user's input on every keystroke depending on the validation status. For example when user starts typing any number, the formatter checks the validation status based on NATIONAL OR INTERNATIONAL (according to selection) and formats the number once it is valid.
NATIONAL -> (0321 1234567)
INTERNATIONAL -> (+92 321 1234567)
`
Demo
Click HERE to watch the demo video.
> Note: This Demo video is recorded with specific options. The main idea is to highlight the formatting and validation.
Installation
You need to add dependency and install package as follows:
`
npm i awesome-phonenumber@3.3.0
npm i ngx-intl-telephone-input
`
> Note: Don't forget to add awesome-phonenumber@3.3.0 or else it will not work properly.
Basic Usage
#### Import
Add NgxIntlTelephoneInputModule into your module file:
`typescript
import { NgxIntlTelephoneInputModule } from "ngx-intl-telephone-input";
`
`typescript
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, NgxIntlTelephoneInputModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
`
#### Example
`html
[enablePlaceholder]="true"
[searchCountryFlag]="true"
[separateDialCode]="false"
[enableAutoCountrySelect]="true"
[searchCountryField]="SearchCountryField.All"
[phoneValidation]="false"
[numberFormat]="PhoneNumberFormat.International"
[inputId]="'phone'"
(onChange)="onInputChange($event)"
>
`
(Refer to OPTIONS Section for more details)
> Note: Don't forget to add CountryISO, SearchCountryField and PhoneNumberFormat enums into your .ts file. Add below line of code to import all of them.
`typescript
import {
CountryISO,
PhoneNumberFormat,
SearchCountryField,
} from "ngx-intl-telephone-input";
`
#### Output Sample
onChange() will emit such an event on every keystroke.
`json
{
"phoneNumber": "+92 304 6219062",
"selectedCountry": "Pakistan (پاکستان)",
"iso2Code": "pk",
"dialCode": "92",
"numberFormat": "INTERNATIONAL",
"isNumberValid": true
}
`
Options
| Sr. | Parameters | Data Type | Default Value | Description |
| --- | ------------------------ | -------------------------- | --------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| 01 | cssClass | string | '' | Custom CSS Class that'll be added to phone number's input element. |
| 02 | preferredCountries | (CountryISO)[] | [] | List of countries, that will appear at the top saperated by horizental line from all countries. |
| 03 | onlyCountries | (CountryISO)[] | [] | List of countries, that will appear in the dropdown. Preferred countries will depends upon this list. |
| 04 | enableAutoCountrySelect | boolean | true | If true and INTERNATIONAL format is enabled, will detect and will automatically change the selected country according to number entered. |
| 05 | enablePlaceholder | boolean | true | If true, Enables and sets Input placeholder text, according to the country selected. |
| 06 | customPlaceholder | string \| null | null | Custom string to be inserted as a placeholder in phone number Input tag. |
| 07 | numberFormat | PhoneNumberFormat | PhoneNumberFormat.International | Enables NATIONAL or INTERNATIONAL formatting. |
| 08 | searchCountryFlag | boolean | false | Enables search Input for countries in the dropdown. |
| 09 | searchCountryField | SearchCountryField | SearchCountryField.All | Allows to search country by name, dial-code, iso2 and by all if searchCountryFlag is enabled. Use SearchCountryField enum. |
| 10 | searchCountryPlaceholder | string | 'Search Country' | Sets placeholder for search country Input. |
| 11 | maxLength | number \| null | null | Maximum characters allowed in input. |
| 12 | selectFirstCountry | boolean | true | Selects first country from preferredCountries if it is set. If not then uses main list. |
| 13 | phoneValidation | boolean | true | Toggle validation on user input. If true, will give feedback to user on every keystroke. |
| 14 | inputId | string | 'phone' | Unique ID for Input tag in html. |
| 15 | selectedCountryISO | CountryISO \| null | null | Set specified country on load. |
| 16 | separateDialCode | boolean | false | Saperate Dial code from user input and will appear next to country flag. |
| 17 | onChange | EventEmitter | new EventEmitter | Emits input value entered along with validation staus on every keystroke. |
> Note: Please refer to CountryISO, SearchCountryField, PhoneNumberFormat and InputValue to get more idea.
Contributions
- Fork repository
- Update ./projects/ngx-intl-telephone-input (Add features/Resolve Bugs)
- Build and test the library
- Update ./src/app component with new functionality
- Update README.md
- Create pull request
Contact Information
_OKASHA_ _KHAN_ | _FullStack JavaScript Developer_
- :email: okashakhan4141@gmail.com`