Intro

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

Usage

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)"/>

Inputs

Name	Type	Default	Description
searchPlaceHolder	string?	null	The Placeholder for the search input
defaultCountry	string?	null	Alpha 2 Country Code
hue	string?	212	HSL color Hue value for customizing theme
customScrollbar	boolean?	true	Use false to disable theming for scrollbar

Outputs

Name	Parameters	Description
countrySelected	country: Country	Emits whenever there is a change in country selected including the default country
dropdownOpened	didOpen: boolean	Emits whenever dropdown is toggled

Styling

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

Sources

Flags used are from this Package

The Countries Data was copied form this Github Repo