Angular 2 Reactive Forms - 在反应表单的表单数组中绑定选择下拉值

Question

我创建了一个具有表单数组的反应式表单。单击按钮将表单组推入表单数组。所以每次点击按钮都会在屏幕上生成一段 html。

此表单组包含 2 个具有父子关系的下拉列表，即在父下拉列表中选择项目决定要在子下拉列表中填充的值。

当我在父下拉更改事件中选择一个值时，会为子级获取结果，但这必须限制在特定表单数组元素的范围内。当前更改事件获取数据并为每个表单数组元素中的子下拉菜单设置值。这是我标记的基本结构

<form [formGroup] = "mainForm" (ngSubmit)="savedata()">
<div>some form control</div>
<div formArrayName = "myArray" *ngFor="let arrayitem of myArray.controls";let i = index">
<div [formGroupName] = "i">
<div>
 <select class="form-control" (change)="onSelect($event.target.value)" id="{{'header' + i}}" formControlName="parentdrpdown">
 <option value="" disabled selected hidden>Select a Parent...</option>
 <option *ngFor="let pitem of parentdrpdown"
         value={{pitem.id}}>
         {{pitem.name}}
 </option>
 </select>
</div>
<div>
 <select class="form-control" (change)="onSelect($event.target.value)" id="{{'header' + i}}" formControlName="childdrpdown">
 <option value="" disabled selected hidden>Select a Child...</option>
 <option *ngFor="let citem of childdrpdown"
         value={{citem.id}}>
         {{citem.name}}
 </option>
 </select>
</div>
</div>    
</div>

constructor(private fb: 
 FormBuilder, private _segService: SegmentService) {
    this.parentdrpdown= this._segService.getparentValues();

onSelect(pid) {
    this.childdrpdown= this._segService.getChildSegment()
        .filter((item) => item.parentid == pid);
 }

parentdrpdown 和 childdrpdown 是在组件中声明的属性，它们使用对 Web 服务器的 http get 请求加载值

Answer 1

在选择标签的情况下，使用下面的 sn-p 以反应形式的代码。

<h1>My Application</h1>
<select formControlName="selectedValue">
   <option *ngFor="let c of countries" [ngValue]="c">{{c.name}}</option>
</select>