如何解决如何在选择时使用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()会不断调用,最终不会加载相应的状态数据。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。