This library is for International Phone Number Validation for Angular using Directive. It supports both Template driven and Reactive Forms.

libphonenumber-js is used for the Phone Number validation.

Demo

1. npm i ngx-international-number

2. Add InternationalPhoneModule import to your NgModule (where the directive is used) like this:

   import { NgxInternationalNumberModule } from "ngx-international-number";
   
   @NgModule({
     imports: [NgxInternationalNumberModule],
   })
   export class AuthModule {}

3. Add the Directive to you Phone Number Input like this:

   <input
    type="tel"
    formControlName="phoneNumber"
    international-number
    defaultCountry="PK"
    (countrySelected)="countryChanged($event)"/>

• dropdown-open class is added on the root element of country select when dropdown is open for custom styling

Flags used are from this Package

The Countries Data was copied form this Github Repo