phone-number-entry

CountryRegion-City-Selector

This Angular Material component (Module) allows for phone number entry. This has been supported for US and Canada. This component validates the international code and areacode for the region.

more details to come...

Installation

npm install phone-number-entry

Scaffolding

Import the module into your project under imports

imports: [
  BrowserModule,
  AppRoutingModule,
  PhoneNumberEntryModule
]

Use

Create a formControl for phone number

form = this.fb.group({
  phone: [null],
})

You have to specify the data files

dataFiles: DataFile = {
  international: { name: 'International', file: 'assets/data/international-codes.csv'},
  countries: [
    { name: 'Canada', file: 'assets/data/canada-areacodes.csv'},
    { name: 'United States', file: 'assets/data/united-states-areacodes.csv' }
  ]
}

In your component, use the following tag

<div [formGroup]="form">
  <wav-phone-number-entry
    [dataFiles]="countries"
  ></wav-phone-number-entry>
</div>

Inputs

The following Inputs are available

Input	Type	Defaut	Description
dataCountryFiles	CountryDataFile[]	[ ]	list of countries and data
phone	STRING	NULL	Phone - format:0019101129999x201
placeholder	STRING	'New York'	Label for placeholder (autocomplete input)
required	BOOLEAN	''	adds required validator
style	STRING	''	styles to apply to formfield/select
maxLen	NUMBER	NULL	input max for city entry
Appearence	STRING	NULL	input style

Outputs

The following Outputs available

Sample Implementation

<div [formGroup]="form">
  <wav-phone-number-entry
    [dataCountryFiles]="countries"
  ></wav-phone-number-entry>
</div>

Input return

You will note that the control will only return only if country, region and city controls are defined in the form object

{
  "phone": "0014159021111x1023",
}

Below is a sample of the implementation

more to come...