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...