Angular ReactiveForms - nested FormGroup within FormArray (no control found)

Question

I have the following formarray (inside a parent: formgroup):

someArray: this.fb.array([
{
   someGroup: this.fb.group(
   {name: 'value', type: 'value2;}
   )
}

My html looks as follows:

<fieldset formArrayName="someArray">
  <div *ngFor="let someValue of parents.controls.someArray.controls; let x = index" >

    <div [formGroupName]="x">
     <fieldset formGroupName="someGroup">

I get the following error:

Cannot find control at someArray -> 0 > someGroup

I would expect that at index 0 in someArray, there is a formGroup somegorup therefore I can add a fieldset in the html for it. However this isn't the case. Can somebody explain why?

Cheers

yurzui · Accepted Answer · 2018-11-18 16:32:35Z

1

That's because you created FormArray of one FormControl with the value:

{
   someGroup: this.fb.group(
     {name: 'value', type: 'value2}
   )
}

What you're looking for is:

someArray: this.fb.array([
   this.fb.group({
      someGroup: this.fb.group(
        { name: 'value', type: 'value2' }
      )
   })
])

Notice this.fb.group when constructing element for FormArray.

Ng-run Example

answered Nov 18, 2018 at 16:32

yurzui

215k32 gold badges450 silver badges413 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular ReactiveForms - nested FormGroup within FormArray (no control found)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related