NgxMaterialIntlTelInput

https://github.com/juanjotorres90/ngx-material-intl-tel-input

Introducing an Angular library designed to streamline the input and validation of international telephone numbers. Integrates a searchable material select component for convenient country code selection. Moreover, it automatically detects the user's country, dynamically presenting a relevant placeholder for enhanced user experience. With built-in formatting and validation functionalities, this library ensures accuracy and consistency in handling telephone numbers across diverse global contexts.

Check out the Demo

Compatibility:

Validation with google-libphonenumber

| ngx-material-intl-tel-input | Angular | | --------------------------- | --------- | | 0.0.1 - 17.3.0 | >= 17.2.0 |

Installation

$ npm install ngx-material-intl-tel-input --save

Ensure to include provideAnimations() in the providers array of your main.ts file to initialize your application with animations. Refer to the Angular Docs for detailed instructions.

Additionally, it's essential to incorporate an Angular Material theme by importing the necessary CSS for styling. Please consult the Angular Material Theming guide for instructions on how to set up the theme.

Usage

Import

Include the NgxMaterialIntlTelInputComponent in the imports array of the standalone component where you intend to utilize it.

imports: [NgxMaterialIntlTelInputComponent];

Example

<form [formGroup]="formGroup">
  <ngx-material-intl-tel-input [fieldControl]="control" [required]="true" [autoIpLookup]="false"> </ngx-material-intl-tel-input>
</form>

Options

| Options | Type | Default | Description | | ------------------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------- | | fieldControl | FormControl | FormControl('') | Form control required to retrieve the value. | | required | boolean | false | Telephone field input required. | | disabled | boolean | false | Telephone field input disabled. | | autoIpLookup | boolean | true | Sets initial country code based on user's ip. | | autoSelectCountry | boolean | true | Enables or disables auto selecting a country on initialization. | | autoSelectedCountry | CountryISO \| string | '' | Sets the country to be auto selected. | | numberValidation | boolean | true | Enables or disables phone number validation. | | enableSearch | boolean | true | Enables or disables country search. | | preferredCountries | (CountryISO \| string)[] | [] | Shows the specified countries on top of the list. | | visibleCountries | (CountryISO \| string)[] | [] | Shows only the specified countries. | | excludedCountries | (CountryISO \| string)[] | [] | Exclude the specified countries from the list. | | enablePlaceholder | boolean | true | Input placeholder text for every country national number. | | iconMakeCall | boolean | true | Click on phone icon to trigger call action. | | initialValue | string | '' | Sets initial telephone number value | | textLabels | TextLabels | {mainLabel: 'Phone number', codePlaceholder: 'Code', searchPlaceholderLabel: 'Search', noEntriesFoundLabel: 'No countries found', nationalNumberLabel: 'Number', hintLabel: 'Select country and type your phone number', invalidNumberError: 'Number is not valid', requiredError: 'This field is required'} | Overrides all component text labels |

Contributors

Thanks goes to these wonderful people:

This project follows the all-contributors specification. Contributions of any kind are welcome!