Angular 2 Reactive Forms - привязка выбора выпадающего значения в массиве форм реактивной формы

Я создал реактивную форму, которая имеет массив форм. Группа форм помещается в массив форм одним нажатием кнопки. Таким образом, каждый щелчок кнопки генерирует раздел 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 являются свойствами, объявленными в компоненте, и они загружаются со значениями с помощью HTTP-запроса на веб-сервер.


angular2-forms angular2-formbuilder
person Kiran Nair    schedule 07.04.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Используйте приведенный ниже фрагмент кода в реактивной форме в случае тега select.

<h1>My Application</h1>
<select formControlName="selectedValue">
   <option *ngFor="let c of countries" [ngValue]="c">{{c.name}}</option>
</select>
person Deepak Goel    schedule 01.11.2017
comment
где здесь концепция раскрывающегося списка родительских дочерних элементов? - person Pardeep Jain; 15.11.2018