Using FormArray and FormGroups I can't get the selected value of a select list

Question

I'm working on a solution where I have a table grid that allow users to add and remove items from the table. Inside of each row are select columns that represent states, cities and mlb teams. I'm trying to do a cascading select list so when the user select a state, then a list of cities appear for the user to choose from and then when they select a city, then a list of MLB teams appears to choose from.

I can't figure out how to get the selected state value and then how to properly populate the city select list for the current row I'm on.

Help is needed.

onStateChange(index: number) {
    const stateID = Number(this.mlbForm.get('items')?.get('state')?.value);

    //
  }

Its on this call is where the stateID returns 'NaN'. Provided below is a link to my sample application on StackBlitz https://stackblitz.com/edit/stackblitz-starters-vkpoxs?file=src%2Fapp%2Fapp.component.ts

Any help I would gladly appreciate it.

Answer 1

You should use the at() to get the array inside the group.

this.items.at(index)?.get('state')?.value

Fix below: https://stackblitz.com/edit/stackblitz-starters-teeuxb?file=src%2Fapp%2Fapp.component.ts&file=src%2Fapp%2Fapp.component.html