CODEWITHSUNDEEP
htmlangulartypescriptfrontend
Joss MT
Joss MT

Reputation: 299

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

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

Upvotes: 0

Views: 48

Answers (1)

yurzui
yurzui

Reputation: 214295

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

Upvotes: 1

Related Questions