How to create a Reactive Form using only FormArray using Angular6?

Question

I have a table which dynamically constructs rows as follows

<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>

now, how can i attach my dynamically created controls to the form? i tried this

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

but it is giving me error stating, the formGroup cannot contain formArray

how can i add my formArray into the formGroup using reactive form approach?

employeeForm is (and must be) of type FormGroup. You're trying to initialize it with `this.formbuilder.array([])`. [FormBuilder.array()](https://angular.io/api/forms/FormBuilder#array) creates and returns a FormArray, not a FormGroup. So this can't possibly be correct. Use arra() to create a FormArray. use group() to create a FormGroup. Read the guides to know what form groups and form arrays are, and how to use them. https://angular.io/guide/reactive-forms — JB Nizet, Mar 17 '19 at 09:57
made a simple demo a few days ago, which might show you a simple method to do this: https://stackoverflow.com/questions/55135226/how-action-buttons-works-in-angular-6-json-schema-form/55136357#55136357 — Akber Iqbal, Mar 17 '19 at 10:00
@LijinDurairaj, I'm glad it helped, would appreciate a vote up so that it gets more visibility — Akber Iqbal, Mar 18 '19 at 05:06

score 3 · Accepted Answer · answered Mar 17 '19 at 18:44

The sample that Akber Iqbal links to in their comment does what you want with FormBuilder. It may be easier to see how the types match up without FormBuilder though. A FormControl represents the actual form element (input, textarea, etc) in the html. FormGroup and FormArray are both containers that hold a mix of FormGroups, FormArrays, and/or FormControls. When you construct a FormGroup or FormArray, you pass in its initial child controls.

Below the parent FormGroup, employeeForm, contains a FormArray. I'll add two default child FormControls to the FormArray:

employeeForm: FormGroup;
nameArray: FormArray;

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

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

In the template you should be able to loop over the FormArray's children

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

If you want to have multiple form elements per employee (one for name and one for address for instance) you will probably want to have one more layer of nesting where the FormArray's immediate children are FormGroups that then each contain a name FormControl and an address FormControl.

But seeing that this is not in a `
` tag, you are loosing all the other functionality of the form like a button in the form to submit? — Alfa Bravo, Sep 13 '21 at 06:07

How to create a Reactive Form using only FormArray using Angular6?

1 Answers1