Как обновить параметры мат-автозаполнения из другого компонента?

В моем приложении есть два компонента, которые называются Employee и Form. Есть 2 мат-автозаполнения: списки штатов и городов в EmployeeComponent. Я заполняю и передаю эти элементы управления mat-autocomplete в FormComponent, используя параметр formData:

Компонент сотрудника:

HTML

<form #form [formData] = "formControls"></app-form>

тс

formControls = [];
states: StateDto[] = [];
cities: CityDto[] = [];

// fill employee list
getStates() {
    this.demoService.getStates().subscribe((data: StateDto) => {
      this.states = data;
    });
}

getCities() {
    this.demoService.getCities().subscribe((data: CityDto) => {
      this.cities = data;
    });
}

// create for data array
this.formData = [
  {
    id: 'states',
    type: 'custom-autocomplete',
  },
  {
    id: 'cities',
    type: 'custom-autocomplete',
  }
]


// set form control's list data
this.formControls = this.formData.map(item => {
  if (item.id === 'states') {
    item.options = this.states;
  }
  else if (item.id === 'cities') {
    item.options = this.cities;
  }
  return item;
});

Компонент формы:

HTML

@Input() formData = [];
options = {};

ngOnInit() {
    //code omitted for brevity
    this.autocompleteControl.forEach(item => {
        // here I set each autocomplete's options
        this.options[item.id] = item.options;
    });
}

В этот момент, когда я выбираю штат, который я хочу, список городов очищается и заполняется городами выбранного штата. Итак, где я должен управлять этим? На EmployeeComponent или на FormComponent? И hoca я должен установить параметры списка городов с элегантным решением?