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
18.0.0 - 18.2.0	>= 18.0.0
0.0.1 - 17.3.0	>= 17.2.0

Installation

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

Ensure to include provideAnimations() and provideHttpClient() in the providers array of your main.ts file to initialize your application with animations and auto getting country code capabilities. Refer to the Angular Docs provideAnimations and provideHttpClient 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.
fieldControlName	string	''	Form control name to assign the control from a FormGroup.
required	boolean	false	Telephone field input required.
disabled	boolean	false	Telephone field input disabled.
appearance	'fill' | 'outline'	fill	Material form field appearance.
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.
includeDialCode	boolean	false	Includes the dial code in the phone number input.
emojiFlags	boolean	false	Use standard emoji icons for the country flags.
hidePhoneIcon	boolean	false	Hides phone icon.
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

Events

Event	Type	Default	Description
currentValue	string	''	Emitted when the value of the input changes.

Contribute and develop locally

✨ This workspace has been generated by Nx, Smart Monorepos · Fast CI. ✨

Integrate with editors

Enhance your Nx experience by installing Nx Console for your favorite editor. Nx Console provides an interactive UI to view your projects, run tasks, generate code, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users.

Prepare dependencies

To start your development once you have cloned this project, you must execute:

• Using Nodejs:

Node 20.13.1 is required.

npm install

• Using pnpm:

pnpm install

• Using bun:

curl -fsSL https://bun.sh/install | bash
bun install

Start the application

Run npx nx serve ngx-material-intl-tel-input to start the development server.

Happy coding! 💻🚀

Build for production

Run npx nx build ngx-material-intl-tel-input-lib to build the library. The build artifacts are stored in the output directory (e.g. dist/ or build/), ready to be deployed.

This project follows conventional commits specification.

Contributors

Thanks goes to these wonderful people:

Juanjo Torres 🎨 💻 📖 🤔 💬 🚇 💡 🚧 👀 ⚠️

Rafa Hernández 💻 🤔 💬 🚇 🚧 👀

Glen Hollingworth 💻 🤔 💬 💡 🚧 👀

EphraimHaber 💻 🤔 💬 💡 🚧 👀

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