Country, Region, City Form Control

This Angular component (Module) allows you to select the country, region and city. This has been supported for US and Canada. This component may validate the city selected from both country and region. You may overide the city from a dropdown to an autocomplete allwoing the user to enter the city if not in the current supported list.

This component is supported on both large and small screens.

There are 2 external files (database of countries, regions and cities) that need to be copied to the assets folder and then provided as an array to the component so it knows what to import.

You will find these files in the src/lib/services/data Copy this folder and place it into the assets folder

This means you can extend the countries by creating your own database (csv) file to be added for your project.

Installation

npm install country-region-city-selector

Scaffolding

Import the module into your project under imports

imports: [
    BrowserModule,
    AppRoutingModule,
    CountryRegionCitySelectorModule
  ],

Use

To use in your component, use the following tag

<wav-color-selection></wav-color-selection>

Inputs

dataCountryFiles: list of countries and data CountryDataFile[]

omnitFirstLineInDataFile: remove header (1st line) for data file BOOLEAN

formGroupName="location"
(group name of your form control)
Below is a sample of the formGroup define for our example

selectForm = this.fb.group({
  location: this.fb.group({
    country: ['Canada'],
    region: ['Ontario'],
    city: ['Toronto South']
  })
})

Sample Configurations

<wav-country-region-city-selector
  [dataCountryFiles]="countries"
  [omnitFirstLineInDataFile]="true"
></wav-country-region-city-selector>

Here is the same component inside a formGroup

<div [formGroup]="selectForm">

  <wav-country-region-city-selector
    [dataCountryFiles]="countries"
    [omnitFirstLineInDataFile]="true"
    formGroupName="location"
  ></wav-country-region-city-selector>

</div>

Input return

You will note that the control will return

{
    "country": "Canada",
    "region": "Ontario",
    "city": "Toronto"
}

Below is a sample of the implementation

> CountryDataFile - MODEL defines: { name: string, file: string}

countries: CountryDataFile[] = [
  { name: 'Canada', file: 'assets/data/canada.csv'},
  { name: 'United States', file: 'assets/data/united-states.csv' }
]

selectForm = this.fb.group({
  location: this.fb.group({
    country: ['Canada'],
    region: ['Ontario'],
    city: ['Toronto South']
  })
})

ngOnInit() {

  this.selectForm.valueChanges.subscribe(data => {
    console.log('data', data)
  })

}