Javascript 角度8表单数组控件不用于选择

试图通过选定的国家/地区，以使各自的州绑定到同胞下拉列表中。不幸的是，它抛出了一个错误

代码中有什么错误。我有点建议

HTML

<form [formGroup]='entityForm'>
              <div formArrayName="optionGroups" class="ui-g ui-g-12 ui-g-nopad " >
                <div  class="ui-g  ui-g-12 ui-g-nopad " *ngFor="let item of entityForm.controls['optionGroups'].controls; let $index=index" [formGroupName]="item">

 <select formControlName="country" class="ui-inputtext" (change)="onCountryChange(entityForm.controls['optionGroups'].controls[$index].controls['country'].value, $index)" > 
                  <option>--Select--</option>
                  <option *ngFor="let c of countries" [ngValue]="c.value">{{c.label}}</option>
                 
                </select>

 <select formControlName="state" class="ui-inputtext"> 
                  <option>--Select--</option>
                  <option *ngFor="let state of states[entityForm.controls['optionGroups'].controls[$index].controls['country'].value]" value="state.value">{{state.label}}</option>
                 
                </select>

</div>
                </div>

选择国家/地区时出错

---

您尝试使用

[formGroupName]=“item”

访问数组的formGroups<但是，代码>项不是名称，而是对象（FormGroup）。这就是您在控制台中看到的对象。请将其更改为

[formGroup]='item'

public countries = [];
public states = [];

public entityForm: FormGroup;
constructor() {

this.entityForm = this.fb.group({
    optionGroups : this.fb.array([
        this.fb.group({
          country : [],
          state : [],

      }),
   ])

this.countries = [{"label":"United States","value":"US"},{"label":"Canada","value":"CA"}];
this.states=[];    
}

 onCountryChange(selectedCountry: string , formIndex : number) : void {    
      this.states[selectedCountry] = this.getStates(selectedCountry)      
    }