如何在选择时使用formArray索引加载动态Dropown数据

问题描述

我有一个场景，例如添加/删除具有多个表单控件的表单组。

例如，

第一个下拉列表是国家/地区列表，第二个下拉列表是基于所选国家/地区的州列表，最后一个输入控件是注释。

问题是，当我加载页面国家/地区下拉数据时，默认情况下会加载国家/地区api，但根据所选国家/地区无法正确加载状态。当我更改国家/地区时，所有其他国家/地区的下拉列表也进行了类似的更改。

例如，

这是我的尝试 HTML

<form [formGroup]='formName'>
              <div formArrayName="controllerArray" class="ui-g ui-g-12 ui-g-nopad " >
                <div  class="ui-g  ui-g-12 ui-g-nopad " *ngFor="let item of formName.controls.controllerArray.controls; let i=index" [formGroupName]="i">  
                  <div class="ui-md-4">                   
                    <label class="mandatory"
                  >{{ labels["STATE_OF_INCORPORATION_FILE_NUMBER"] }}
                  <span class="colon"></span>
                </label>           

                <select formControlName="select1" class="ui-inputtext" [(ngModel)]="item.controls.select1.value" (change)="changeAction($event,i)"> 
                  <option>--Select--</option>
                  <option *ngFor="let c of countryOptions" [value]="c.value">{{c.label}}</option>
                 
                </select>
              </div>
              <div class="ui-md-4">
                <label class="lbl-hidden"> State </label>
                <select formControlName="select2" class="ui-inputtext" [(ngModel)]="item.controls.select2.value"> 
                  <option>--Select--</option>
                  <option *ngFor="let b of businessstateOptions" [value]="b.value">{{b.label}}</option>
                 
                </select>
              </div>
              <div class="ui-md-3">
                <label class="lbl-hidden"> comments  </label>
                <input
                  type="text"
                  pInputText
                  class="form-control"
                  formControlName="input"    
                />
                </div>
                <div class="ui-md-1">
                  <label class="lbl-hidden"> State </label>
                  <br/>
                  <button (click)='removeInput(i)'  style="min-width: auto;"  pButton icon="fa fa-minus"></button>
                </div>
                </div>
              </div>
            </form>
            
            <button class="add-remove-btn" pButton (click)='addinput()' icon="fa fa-plus"></button>` 

Angular8 TS

import { Component,OnInit,ViewChild } from '@angular/core'
import { FormBuilder,Validators,FormArray } from '@angular/forms';

export class EntityEditComponent implements OnInit {
public countryOptions = [];

formName =this.fb.group({
    controllerArray: this.fb.array([])
  })  

ngOnInit() {    
 this.countryOptions = [{"label":"United States","value":"US"},{"label":"Canada","value":"CA"}]
}

 changeAction(e,index) { 
  if(index == 1 ) {     // Here I'm trying to change the data if country is selected CA
 let businessstateOptions = []
businessstateOptions= [{label:"Alberta",value:"CA"}]

const controlArray = <FormArray> this.formName.get('controllerArray');
    controlArray.controls[index].get('select2').setValue( businessstateOptions);
    }  
}



addinput() {(this.formName.get('controllerArray') as FormArray).push(this.fb.group({select1:'',select2:'',input:''})) }

removeInput(index) { this.formName.controls.controllerArray["controls"].splice(index,1) }

}

预期结果是

当我更改国家/地区时，需要在“国家/地区”下拉列表中加载选定的国家/地区，而不会影响其他任何下拉列表。

解决方法

您正在用自己的方法泡菜。您正在将反应形式与模板驱动形式混合在一起。首先，您需要使用ngModel删除所有内容。然后删除您的changeAction方法。然后将[value]更改为[ngValue]。然后在select2下拉列表中，根据该item国家/地区值更改您调用相关州的方式。像这样：

<form [formGroup]='formName'>
              <div formArrayName="controllerArray" class="ui-g ui-g-12 ui-g-nopad " >
                <div  class="ui-g  ui-g-12 ui-g-nopad " *ngFor="let item of formName.controls.controllerArray.controls; let i=index" [formGroupName]="i">  
                  <div class="ui-md-4">                   
                    <label class="mandatory"
                  >{{ labels["STATE_OF_INCORPORATION_FILE_NUMBER"] }}
                  <span class="colon"></span>
                </label>           

                <select formControlName="select1" class="ui-inputtext"> 
                  <option>--Select--</option>
                  <option *ngFor="let c of countryOptions" [ngValue]="c.value">{{c.label}}</option>
                 
                </select>
              </div>
              <div class="ui-md-4">
                <label class="lbl-hidden"> State </label>
                <select formControlName="select2" class="ui-inputtext"> 
                  <option>--Select--</option>
                  <option *ngFor="let b of getRelevantStates(item.controls.select1.value)" [ngValue]="b.value">{{b.label}}</option>
                 
                </select>
              </div>
              <div class="ui-md-3">
                <label class="lbl-hidden"> comments  </label>
                <input
                  type="text"
                  pInputText
                  class="form-control"
                  formControlName="input" />
                </div>
                <div class="ui-md-1">
                  <label class="lbl-hidden"> State </label>
                  <br/>
                  <button (click)='removeInput(i)'  style="min-width: auto;"  pButton icon="fa fa-minus"></button>
                </div>
                </div>
              </div>
            </form>
            
            <button class="add-remove-btn" pButton (click)='addInput()' icon="fa fa-plus"></button>

您还需要根据表单数组中的此项创建一种新方法来调用相关状态：

    getRelevantStates(countryId){
var states = [];
    // Return states based on countryId.
return states;
    }

@Andrew： 按照上述逻辑，getRelevantStates（）会不断调用，最终不会加载相应的状态数据。