angular-intl-phone

Agular Phone Intl Library

angular-intl-phone Phone library supported intl-tel-input & google-libphonenumber to validate phone.

Supports

• Angular 9 and 9+ Supported
• If your TypeScript is lower than 3.7 and angular version is lower than 9 version. Update TypeScript else go to tsconfig.json file and add "skipLibCheck": true in "compailerOptions"

Features

• Phone number validation
• Country dropdowns
• Configuration for phone input
• Cross browser support
• Modify placeholder
• Form control supported

Installation

npm install --save angular-intl-phone

Include it to your module for example your app.module.ts

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AngularIntlPhoneModule } from 'angular-intl-phone';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    FormsModule,
    ReactiveFormsModule,
    AngularIntlPhoneModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Usage

import { ChangeDetectorRef, Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { InputSearchSelectConfig } from 'input-search-select-option';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  phoneData: any = '';
  reactiveForm: FormGroup;
   config: AngularIntlPhoneConfig = {
    id: 'telphone',
    name: 'telphone',
    placeholder: 'Enter phone number',
    options: {
      onlyCountries: ["in", "us", "uk"],
      initialCountry: 'in',
      separateDialCode: true,
      hiddenInput: "full_phone",
    }
  }

  constructor(fb: FormBuilder, private cdr: ChangeDetectorRef) {
    this.reactiveForm = fb.group({
      phone: ['', Validators.compose([Validators.required])],
    });
  }

}

<form [formGroup]="reactiveForm">
  <angular-intl-phone formControlName="phone" [config]="config" [(ngModel)]="phoneData">
  </angular-intl-phone>
  {{reactiveForm.get('phone').touched}}
  {{reactiveForm.get('phone').errors | json}}
  <pre>
    {{phoneData | json}}
    <!--  Phone data object
    {
        "number": "8329895988",
        "internationalNumber": "[phone]",
        "nationalNumber": "083298 95988",
        "e164Number": "[phone]",
        "countryCode": "IN",
        "dialCode": "91",
        "dialCodeWithPlus": "+91"
    } 
    -->
  </pre>
</form>

Dependencies

• Angular 9+