NgxIntlTelInputV15

An Angular library for entering international phone numbers and validating the input based on the country code.

Installation

Install the necessary dependencies:

npm install intl-tel-input --save
npm install --save-dev @types/intl-tel-input
npm install ngx-intl-tel-input-v15 --save

Add dependencies to your angular.json or project.json:

"styles": [
  "node_modules/intl-tel-input/build/css/intlTelInput.css"
],
"scripts": [
  "node_modules/intl-tel-input/build/js/intlTelInput.min.js",
  "node_modules/intl-tel-input/build/js/utils.js"
]

Usage

1. Import NgxIntlTelInputModule into your module file.

import { NgxIntlTelInputModule } from 'ngx-intl-tel-input-v15';

@NgModule({
  imports: [NgxIntlTelInputModule],
  // other module configuration...
})
export class YourModule { }

2. Use ngxIntlTelInput directive in your template.

<input 
  type="text"  
  ngxIntlTelInput 
  [ngxTelInputOptions]="ngxTelInputOptions"  
  [phonenumber]="phonenumber" 
  (hasError)="invalidForm($event)" 
  (countryChange)="getCountryData($event)" 
/>

Options

The [ngxTelInputOptions] input accepts an object providing configuration for the input. Example:

const options = {
      allowDropdown: true,
      autoInsertDialCode: false,
      nationalMode: true,
      separateDialCode: false,
      preferredCountries: ['us', 'gb'],
      formatOnDisplay: true,
      initialCountry: "auto",
      autoPlaceholder: "polite",
};

[ngxTelInputOptions]="options"

Inputs

• [ngxTelInputOptions]: Object - Configuration options for the input.
• [phonenumber]: String - Mobile number without the country code.

Outputs

• (hasError): EventEmitter - Emits an error message when validation fails.
• (countryChange): EventEmitter - Emits country metadata on country change.

Example

ngxTelInputOptions = {
  allowDropdown: true,
  autoInsertDialCode: false,
  // other options...
};

phonenumber = "";

invalidForm(error: string) {
  console.log("Validation Error: ", error);
}

getCountryData(data: any) {
  console.log("Country Data: ", data);
}