ngx-intl-telephone-input v1.0.1

International Telephone Input - Angular (ngx-intl-telephone-input)

About Package

Ngx-Intl-Telephone-Input is an Angular Plugin that validates user's input, provides formatting for (both national and international) phone numbers and triggers an event on every keystroke. (See Sample Output to have a better idea about event triggered).

It has a dropdown showing information about country flag, name and dial-code. Depending upon the options selected, adds placeholder according to selected country and formats the input.

(Refer to OPTIONS Section for more details)

Dependencies

Ngx-Intl-Telephone-Input has only one dependency, awesome-phonenumber v3.3.0 for formatting and validating user's input. You need to add this package as well before using intl-tel-input.

Comparison with other libraries

Although, there are a lot of packages out there but this package has some advantanges over them. The 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.

The 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.

Please refer to DEMO section for more insights!

Supported Phone Formats

This package supports only national and international formats for phone number formatting and validation.

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:

import { NgxIntlTelephoneInputModule } from "ngx-intl-telephone-input";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NgxIntlTelephoneInputModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Example

<intl-telephone-input
  [preferredCountries]="[CountryISO.Pakistan, CountryISO.India]"
  [enablePlaceholder]="true"
  [searchCountryFlag]="true"
  [separateDialCode]="false"
  [enableAutoCountrySelect]="true"
  [searchCountryField]="SearchCountryField.All"
  [phoneValidation]="false"
  [numberFormat]="PhoneNumberFormat.International"
  [inputId]="'phone'"
  (onChange)="onInputChange($event)"
>
</intl-telephone-input>

(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.

import {
  CountryISO,
  PhoneNumberFormat,
  SearchCountryField,
} from "ngx-intl-telephone-input";

Output Sample

onChange() will emit such an event on every keystroke.

{
  "phoneNumber": "+92 304 6219062",
  "selectedCountry": "Pakistan (‫پاکستان‬‎)",
  "iso2Code": "pk",
  "dialCode": "92",
  "numberFormat": "INTERNATIONAL",
  "isNumberValid": true
}

Options

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
• LinkedIn :point_right: https://www.linkedin.com/in/okashakhan4141
• Github :point_right: https://github.com/okashakhan4141