ng5-intl-phone v1.2.2

Angular 5 international phone prefix input

Description

This is a simple library with international phone prefix with flags images.

Installation

To install this component to an external project, follow the procedure:

1. npm install ng5-intl-phone --save

2. Add InternationalPhoneModule import to your @NgModule like example below

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { MyTestApp } from './my-test-app';
   import { InternationalPhoneModule } from 'ng5-intl-phone';
   
   @NgModule({
       imports:      [ BrowserModule, InternationalPhoneModule ],
       declarations: [ MyTestApp ],
       bootstrap:    [ MyTestApp ]
   })
   export class MyTestAppModule {}

   ##Testing in localhost

   • npm install ./relative/path/to/lib after npm run build to test locally in another app

     Usage

     Use one of the following two options.

     1. ngModel binding

     In this option the ngModel binding is used.

     <h1>
       {{title}}
     </h1>
     <div class="row">
       <div class="col-md-2">
         <int-phone-prefix [(ngModel)]="phoneNumber"></int-phone-prefix>
     
       </div>
     </div>

     2. Reactive forms

     In this option the value accessor of reactive forms is used.

     To use reactive forms define the application class as follows:

     export class MyTestApp implements OnInit {
     
         private myForm: FormGroup;
     
         constructor(private formBuilder: FormBuilder) { }
     
         ngOnInit() {
             this.myForm = this.formBuilder.group({
                 myPhone: ['', Validators.required]
                 // other controls are here...
             });
         }
     }

     Add the following snippet inside your template:

     <form [formGroup]="myForm" novalidate>
         <int-phone-prefix [locale]="'es'"
                         formControlName="myPhone"></int-phone-prefix>
       <!-- other controls are here... -->
     </form>

     @Input() locale

     An ISO 639-1 language code can be provided to set available language: es: Spanish, en: English

     @Input() defaultCountry

     An ISO 639-1 country code can be provided to set default country selected.

   @Input() maxLength

      maxLength (default: 15)
      

   @Input() onlyNumbers

     Allows only numeric values (default: true)

   License

   • License: MIT

     Author

   • Author: prem

     Mail

   • Mail: premkumar.vnr@gmail.com

     Keywords

   • Phone

   • Prefix
   • International
   • Angular2
   • Angular4