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

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

<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, используя подход реактивной формы?


angular angular-reactive-forms angular2-forms formgroups angular6
person Lijin Durairaj    schedule 17.03.2019    source источник
comment
employeeForm имеет (и должен быть) типа FormGroup. Вы пытаетесь инициализировать его с помощью this.formbuilder.array([]). FormBuilder.array () создает и возвращает FormArray, а не FormGroup. Так что это не может быть правильным. Используйте array () для создания FormArray. используйте group () для создания FormGroup. Прочтите руководства, чтобы узнать, что такое группы форм и массивы форм и как их использовать. angular.io/guide/reactive-forms   -  person JB Nizet    schedule 17.03.2019
comment
несколько дней назад сделал простую демонстрацию, которая может показать вам простой способ сделать это: stackoverflow.com/questions/55135226/   -  person Akber Iqbal    schedule 17.03.2019
comment
спасибо @AkberIqbal, это очень помогло   -  person Lijin Durairaj    schedule 17.03.2019
comment
@LijinDurairaj, я рад, что это помогло, был бы признателен за голосование, чтобы оно стало более заметным   -  person Akber Iqbal    schedule 18.03.2019

Ответы (1)


arrow_upward
3
arrow_downward

Образец, который Акбер Икбал ссылается на в их комментарии делает то, что вы хотите, с FormBuilder. Однако может быть легче увидеть, как типы совпадают без FormBuilder. FormControl представляет собой фактический элемент формы (ввод, текстовое поле и т. Д.) В 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 .

person rrey    schedule 17.03.2019