Phone Number Input With Country Code and Flag for Angular (NgxDialerInput)

Compatibility:

Validation with google-libphonenumber

View example

Installation

Install Dependencies

$ npm install intl-tel-input --save

$ npm install google-libphonenumber --save

$ ng add ngx-bootstrap

Further, Angular CLI should tree-shake the rest of Ngx-Boostrap away if you don't utilize other dependencies from the bootstrap package. This should keep this dependency a lean feature-add

Add Dependency Style

Add 'intl-tel-input' style file:

./node_modules/intl-tel-input/build/css/intlTelInput.css

to angular.json styles array:

"styles": [
  "./node_modules/intl-tel-input/build/css/intlTelInput.css",
  "src/styles.css"
],

Install This Library

$ npm install ngx-dialer-input

Usage

Import

Add NgxDialerInputModule to your module file:

import { NgxDialerInputModule } from 'ngx-dialer-input';
imports: [NgxDialerInputModule];

Example

import { Component } from '@angular/core';
import { CountryISO, PhoneNumberFormat, SearchCountryField } from 'ngx-dialer-input';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'test';

	separateDialCode = true;
	SearchCountryField = SearchCountryField;
	CountryISO = CountryISO;
  PhoneNumberFormat = PhoneNumberFormat;
	preferredCountries: CountryISO[] = [CountryISO.UnitedStates, CountryISO.UnitedKingdom];
}

<form [formGroup]="phoneForm">
	<ngx-dialer-input
		[cssClass]="'custom'"
		[preferredCountries]="[CountryISO.UnitedStates, CountryISO.UnitedKingdom]"
		[enableAutoCountrySelect]="false"
		[enablePlaceholder]="true"
		[searchCountryFlag]="true"
		[searchCountryField]="[SearchCountryField.Iso2, SearchCountryField.Name]"
		[selectFirstCountry]="false"
		[selectedCountryISO]="CountryISO.India"
		[maxLength]="15"
		[phoneValidation]="true"
		[inputId]="my-input-id"
		name="phone"
		formControlName="phone"
	></ngx-dialer-input>
</form>

Options

Supported Formats

Following formats are supported

• NATIONAL // Produces "011 111 11 11"
• INTERNATIONAL // Produces "+11 11 111 11 11"
• E164 // Produces "+11111111111"