Cascaded Angular Material Design sample (with reactive forms)

Question

Any good demo/sample showing how to cascade multiple angular mat-autocomplete controls? All the references I've seen only show one standalone autocomplete. I need to link two controls (possibly three) using reactive forms.

A good similar sample could be like an autocomplete for countries, states/provinces and then cities (depending the selection the child controls may or not appears depending if there is information).

The data is pre-loaded in memory (not huge) so there is no need to lookup a sever asynchronously.

Answer 1

Each mat-autocomplete is applied on ordinary FormControl; either independent FormControl or that included in FormGroup.

For instance; lets suppose that we have Country and Cities; each of them is mat-autocomplete, but you cannot select city until you select country; right?

I hope that's what you meant.

So; to handle this:

• Make Country formControl as an ordinary mat-autocomplete with no extra configurations.

• Make City formControl as disabled until user select country.

• Add optionSelected for countryAutocomplete to enable and filter cities.

I made a simple example to explain this example.

https://stackblitz.com/edit/multiple-autocomplete

if you have 3 or 4; make them like city.