Skip to content

Phone number input field to support international numbers with Angular 7 support

Notifications You must be signed in to change notification settings

sefasenturk95/angular-intl-tel-input

Repository files navigation

International Telephone Input

This package is based on https://github.com/webcat12345/ngx-intl-tel-input. But since it's no longer maintained I decided to update it to work with Angular 7. Also phone number validation is working now and there is support for the (Reactive)FormsModule.

alt

Installation

  1. Install ngx-bootstrap
$ ng add ngx-bootstrap
  1. Install intl-tel-input
$ npm install intl-tel-input --save
  1. Add intl-tel-input css to angular.json Look for the styles array in your angular.json and add ./node_modules/intl-tel-input/build/css/intlTelInput.css. It should look like this after adding it:
"styles": [
  ...
  "./node_modules/bootstrap/dist/css/bootstrap.min.css",
  "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
  "./node_modules/intl-tel-input/build/css/intlTelInput.css",
  "src/styles.css"
  ...
],
  1. Install google-libphonenumber
$ npm install google-libphonenumber --save
  1. Install this library
$ npm install angular-intl-tel-input --save
  1. Add BsDropDownModule and IntlTelInputModule to your angular module file
imports: [
    ...
    BsDropdownModule.forRoot(),
    IntlTelInputModule,
    ...
  ]

Example usage

<div class="container">
  <form #form="ngForm">
    <intl-tel-input [preferredCountries]="['nl', 'gb', 'de', 'be']" [enablePlaceholder]="true" name="phoneNumber" ngModel></intl-tel-input>
  </form>

  <pre>{{ form.value | json }}</pre>
</div>

Live example (Flags are not working in the live example for some reason)

https://stackblitz.com/edit/angular-opecoe