Как создать реактивную форму, используя только FormArray, используя Angular6? - PullRequest
Новая
       33

Как создать реактивную форму, используя только FormArray, используя Angular6?

0 голосов
/ 17 марта 2019

У меня есть таблица, которая динамически строит строки следующим образом 

<form [formGroup]='employeeForm'>
<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">name</th>
      <th scope="col">contact details</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor='let details of employeeDetails'>
      <th formControlName='name' scope="row">{{details.name}}</th>
      <td formControlName='employeeName'>{{details.contactDetails}}</td>
    </tr>
  </tbody>
</table>
</form>

. Как я могу прикрепить свои динамически созданные элементы управления к форме?я попробовал это 

 employeeForm: FormGroup
constructor(private formbuilder: FormBuilder) { }
 ngOnInit() {
this.employeeForm = this.formbuilder.array([])
  }

но это дает мне сообщение об ошибке, formGroup не может содержать formArray

как я могу добавить свой formArray в formGroup, используя реактивный подход к форме

1 Ответ

2 голосов
/ 17 марта 2019

Пример, который Akber Iqbal ссылается на в своем комментарии, делает то, что вы хотите с FormBuilder. Может быть легче увидеть, как типы совпадают без FormBuilder, хотя. FormControl представляет фактический элемент формы (input, textarea и т. Д.) В html. FormGroup и FormArray оба являются контейнерами, которые содержат сочетание FormGroups, FormArrays и / или FormControls. Когда вы создаете FormGroup или FormArray, вы передаете начальные дочерние элементы управления.

Ниже родительской FormGroup, employeeForm, содержит FormArray. Я добавлю два дочерних элемента FormControl по умолчанию в FormArray: 

employeeForm: FormGroup;
nameArray: FormArray;

ngOnInit(){
    this.nameArray = new FormArray([
        new FormControl('name1'),
        new FormControl('name2')
    ]);

    this.employeeForm = new FormGroup({
        employeeNameArray: this.nameArray
    });
}

В шаблоне вы должны иметь возможность перебирать дочерние элементы FormArray 

<tr *ngFor="let employeeName of nameArray.controls; let i=index">
    <td>Name: <input type="text" [formControlName]="i"></td>
</tr>

Если вы хотите иметь несколько элементов формы на одного сотрудника (один для имени и один для адреса, например), вам, вероятно, понадобится еще один слой вложенности, где непосредственными потомками FormArray являются FormGroups, каждый из которых затем содержит имя FormControl и адрес FormControl.

...