ngx-international-phone-number

A simple international telephone number input. Allows you to create a phone number field with country dropdown.

This is re-written version (with enhancement) of ng4-intl-phone. So credit should go to kondi0.

Installation

To install this library, run:

1$ npm install ngx-international-phone-number --save

Consuming your library

Once you have installed it you can import InternationalPhoneNumberModule from ngx-international-phone-number in any application module. E.g.

1import { BrowserModule } from '@angular/platform-browser';
2import { NgModule } from '@angular/core';
3
4import { AppComponent } from './app.component';
5
6// Import your library
7import { InternationalPhoneNumberModule } from 'ngx-international-phone-number';
8
9@NgModule({
10  declarations: [
11    AppComponent
12  ],
13  imports: [
14    BrowserModule,
15
16    // InternationalPhoneNumberModule module
17    InternationalPhoneNumberModule
18  ],
19  providers: [],
20  bootstrap: [AppComponent]
21})
22export class AppModule { }

Once it is imported, you can use international-phone-number:

1<!-- app.component.html -->
2<form name="sample-form" (ngSubmit)="submit()" #f="ngForm">
3 <international-phone-number [(ngModel)]="model.phone_number" placeholder="Enter phone number" [maxlength]="20" [defaultCountry]="'in'" [required]="true" #phoneNumber="ngModel" name="phone_number" [allowedCountries]="['in', 'ca', 'us']"></international-phone-number>
4
5  <div *ngIf="f.submitted && !phoneNumber.valid" class="help-block">Phone number is required and should be valid</div>
6  <button type="submit">Submit</button>
7</form>

Attributes/Options:

   defaultCountryCode : An ISO 3166 country code can be provided to set default country selected.
   placeholder: A placeholder text which would be displayed in input widget
   required: Indicates whether it's required or not
   onlyNumber: Indicates whether the user can type only numbers or not in the input field. It defaults to true.
   allowDropdown: Indicates whether to allow selecting country from dropdown
   allowedCountries: A list of countries (iso codes) that would get display in country dropdown. E.g. [allowedCountries]="['in', 'ca', 'us']" would only show Canada, India and US. If not provided, all the countries would get displayed.

Troubleshooting:

If you are getting error "Can't resolve 'google-libphonenumber'" while building with aot, try to install google-libphonenumber. Run npm install google-libphonenumber@3.0.9 --save

Authors

* Original Author: kondi0
* Author: nikhiln 

License

MIT