International Telephone Input for Angular (PIntlInputTel)

  

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.

!alt

Compatibility:

Validation with google-libphonenumber

| p-intl-input-tel | Angular | PrimeNG |
|------------------|---------|-------------|
| 16.x.x | 16.x.x | \>= 16.8.0 |
| 17.x.x | 17.x.x | \>= 17.2.0 |
| 18.x.x | 18.x.x | \>= 17.18.0 |
| 19.x.x | 19.x.x | \>= 19.0.0 |

Installation

$3

$ npm install p-intl-input-tel --save

$ npm install google-libphonenumber --save

$ npm install primeng

$3

to angular.json styles array:

``json

"styles": [
"./node_modules/p-intl-input-tel/src/assets/style.scss"
],
`

$3

$ npm install p-intl-input-tel --save

Usage

$3

Add IntlInputTelComponent to your standalone component:

`javascript
imports: [IntlInputTelComponent];
`

You can use it by this way:

`html

[favoriteCountries]="favoriteCountries"
[enableAutoCountrySelect]="true"
[displayPlaceholder]="true"
[selectedCountryISO]="CountryISO.FrenchPolynesia"
[phoneValidation]="true"
[separateDialCode]="separateDialCode"
[numberFormat]="PhoneNumberFormat.INTERNATIONAL"
[searchCountryField]="[SearchCountryField.NAME, SearchCountryField.DIALCODE]"
cssClass="custom"
[formControl]="phone">

`

You can choose to use a formControl or just a formControlName. It depends on your needs.

Options

| Options | Type | Default | Description |
|--------------------------|-------------------------|-----------------------------------|---------------------------------------------------------------------------------------------------------------|
| cssClass | string | control-form | Css class or your own custom one. |
| favoriteCountries | [] | [] | List of countries, which will appear at the top. |
| onlyCountries | [] | [] | List of manually selected countries, which will appear in the dropdown. |
| enableAutoCountrySelect | boolean | true | Toggle automatic country (flag) selection based on user input. |
| displayPlaceholder | 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. |
| displaySearchCountry | boolean | false | Enables input search box for countries in the flag dropdown. |
| searchCountryField | | SearchCountryField.All | Customize which fields to search in, if searchCountryFlag is enabled. Use SearchCountryField helper enum. |
| searchCountryPlaceholder | string | 'Search Country' | Placeholder value for searchCountryField |
| maxLength | number | None | Add character limit. |
| selectFirstCountry | boolean | true | Selects first country from preferredCountries if 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. |
| lang | | fr | Language used for country name display and search. |
| appendTo | | null` | Target element to attach the overlay. |

Supported Formats

Following formats are supported

- NATIONAL // Produces "044 668 18 00"
- INTERNATIONAL // Produces "+41 44 668 18 00"
- E164 // Produces "+41446681800"