how can I nest a formArray inside another formArray using reactive forms

Question

I have a reactive form that uses arrays and has this structure:

 this.myForm = this.fb.group({
  names: this.fb.array([
    this.fb.group({ element_name: [null, [Validators.required]] }),
    this.fb.group({ element_name: [null, [Validators.required]] }),
  ])

Everything works well, performs the respective validations.

I want to add the lastname in another text field and have the required validation, but I do not know what is the way to accommodate like in the image:

I tried to do something similar like what I did with "names" but it doesn't make a mistake. What I can do?

this is my live code:

https://stackblitz.com/edit/angular-nm2vah?file=app/app.component.html

this is my code:

<form [formGroup]="myForm">
  <div formArrayName="names">
      <ng-container
          *ngFor="let item of myForm.get('names').controls; let i=index">
          <div [formGroupName]="i">
                  name <input type="text" class="form-control" id="element_name"
                      formControlName="element_name"
                      placeholder="insert name" 
                  >
                  <!--lastname 
                  <input type="text" class="form-control" id="element_lastname"
                      formControlName="element_lastname"
                      placeholder="insert last name" 
                  >-->
          </div>
      </ng-container>
  </div>
</form>


this.myForm = this.fb.group({
  names: this.fb.array([
    this.fb.group({ element_name: [null, [Validators.required]] }),
    this.fb.group({ element_name: [null, [Validators.required]] }),
  ]),
  lastname: this.fb.array([
    this.fb.group({ element_name: [null, [Validators.required]] }),
    this.fb.group({ element_name: [null, [Validators.required]] }),
  ])

})

I don't understand your exact need but to be cleaner with solution use form array and form group like here stackblitz.com/edit/angular-htegps .. — Maniraj Murugan
– Maniraj Murugan, Commented Sep 14, 2019 at 6:01

Manuel Panizzo · Accepted Answer · 2019-09-14 05:11:59Z

You need to add last name to same form group of the firt name.

this.myForm = this.fb.group({
  names: this.fb.array([
    this.fb.group({
      element_name: [null, [Validators.required]],
      element_lastname: [null, [Validators.required]]
    }),
    this.fb.group({
      element_name: [null, [Validators.required]],
      element_lastname: [null, [Validators.required]]
    }),
  ]),
})

And Your Html:

<form [formGroup]="myForm">
  <div formArrayName="names">
      <ng-container
          *ngFor="let item of myForm.get('names').controls; let i=index">
          <div [formGroupName]="i">
                  name <input type="text" class="form-control" id="element_name"
                      formControlName="element_name"
                      placeholder="insert name" 
                  >

                  <input type="text" class="form-control" id="element_lastname"
                      formControlName="element_lastname"
                      placeholder="insert last name" 
                  >
          </div>
      </ng-container>
  </div>
</form>

Collectives™ on Stack Overflow

how can I nest a formArray inside another formArray using reactive forms

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related