Forked project with improvements
npm install p-intl-input-tel-ggForked project with improvements
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 |
| 20.x.x | 20.x.x | \>= 20.0.0 |
| 21.x.x | 21.x.x | \>= 21.0.0 |
$ npm install p-intl-input-tel --save
$ npm install google-libphonenumber --save
$ npm install primeng
to angular.json styles array:
``json
"styles": [
"./node_modules/p-intl-input-tel/src/assets/style.scss"
],
`
$ npm install p-intl-input-tel --save
Add IntlInputTelComponent to your standalone component:
`javascript`
imports: [IntlInputTelComponent];
You can use it by this way:
`html`
You can choose to use a formControl or just a formControlName. It depends on your needs.
| 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. |boolean
| enableAutoCountrySelect | | true | Toggle automatic country (flag) selection based on user input. |boolean
| displayPlaceholder | | true | Input placeholder text, which adapts to the country selected. |string
| customPlaceholder | | None | Custom string to be inserted as a placeholder. |
| numberFormat | | PhoneNumberFormat.International | Custom string to be inserted as a placeholder. |boolean
| displaySearchCountry | | 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. |string
| searchCountryPlaceholder | | 'Search Country' | Placeholder value for searchCountryField |number
| maxLength | | None | Add character limit. |boolean
| selectFirstCountry | | true | Selects first country from preferredCountries if is set. If not then uses main list. |boolean
| phoneValidation | | true | Disable phone validation. |string
| inputId | | phone | Unique ID for element. |
| selectedCountryISO | | None | Set specific country on load. |boolean
| separateDialCode | | 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. |
Following formats are supported
- NATIONAL // Produces "044 668 18 00"
- INTERNATIONAL // Produces "+41 44 668 18 00"
- E164 // Produces "+41446681800"