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

Question

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

例如，

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

问题是，当我加载页面时，默认情况下加载国家/地区下拉数据加载国家/地区 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) }

}

预期结果是，

当我更改国家/地区时，需要将所选国家/地区的州加载到州下拉列表中，而不影响任何其他下拉列表。

Answer 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;
    }

@安德鲁： 按照上面的逻辑，getRelevantStates() 一直调用，最终各个状态数据都不会被加载。