javascript - Angular 8 Form Array控件不适用于选择

Question

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

代码有什么问题。亲切的建议。

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>

角 8 - TS

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)      
    }

选择国家时出错

标签： javascriptangulartypescriptangular-reactive-forms

Answer 1

您尝试使用 访问数组的 formGroups [formGroupName]='item'。item但是，它不是一个名称，而是一个对象（一个 FormGroup）。那就是您在控制台中看到的对象。请改成[formGroup]='item'