1.2.4 • Published 5 months ago
ngx-intl-phone-number v1.2.4
Intro
This library is for International Phone Number Validation for Angular using Directive. Based on that project. It supports both Template driven and Reactive Forms.
libphonenumber-js is used for the Phone Number validation.
Usage
npm i ngx-intl-phone-numberAdd NgxIntlPhoneNumberModule import to your NgModule like this:
import { NgxIntlPhoneNumberModule } from "ngx-intl-phone-number"; @NgModule({ imports: [NgxIntlPhoneNumberModule], }) export class AuthModule {}Add the Directive to you Phone Number Input like this:
<input type="tel" formControlName="phoneNumber" intl-phone-number defaultCountry="PL" (countrySelected)="countryChanged($event)"/>
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| searchable | boolean | true | Allow to search for country |
| searchPlaceHolder | string? | null | The Placeholder for the search input |
| defaultCountry | string? | null | Alpha 2 Country Code |
| onlyCountries | string[]? | [] | List of manually selected countries, which will appear in the dropdown |
| separateDialCode | boolean | false | Use to display dial code next to the flag |
| strictValidation | boolean | false | If true, it also validates the actual phone number digits |
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-openclass is added on the root element of country select when dropdown is open for custom styling
Sources
The Countries Data was copied form this Github Repo