Angular Form Array, first Index always null

Question

Please assist, i am trying to view data from the component to the view, using angular form array. the following solution: Angular 5 FormArray get data from database and show rows . helped me but now im experiencing a problem where the first index of the form array is always null and im recieving the following errors :

ERROR Error: Cannot find control with path: '[object Object] -> 0'
at _throwError (forms.js:2432)
at setUpFormContainer (forms.js:2405)
at FormGroupDirective.addFormGroup (forms.js:6691)
at FormGroupName.AbstractFormGroupDirective.ngOnInit (forms.js:2568) 
...

Cannot read property 'controls' of undefined
at Object.eval [as updateDirectives] 
...

in my ngOnInit i only have the following :

this.SectionForm= this.formBuilder.group({
  sectionData: this.formBuilder.array([this.buildDevelopmentSector()])
});

this.activatedRoute.params.subscribe(res =>
  // get data and push the data to a formArray called sectionDataArray
  this.GetDataFromApi(res.requestId)
);

the view has the following part :

  <div [formGroup] ="SectionForm">
    <div [formArrayName]="sectionDataArray">
      <div *ngFor="let section of sectionDataArray.controls ; let i = index" [formGroupName]="i">
          ...
          ...
          ...
        </div>

Looking at the logs i see the following :

  0:
     amount:""
     percentage:""
     name:""
     quantity:""
     __proto__:Object 

  1:
     amount:1200000
     percentage:23
     name: "Repo"
     quantity:20000
     __proto__:Object

  length:2
     __proto__:Array(0)

Antoniossss · Accepted Answer · 2018-05-22 18:19:19Z

2

You backing object has

sectionData: this.formBuilder.array([this.buildDevelopmentSector()])

so its sectionData but you are reffering to sectionDataArray here

<div [formArrayName]="sectionDataArray">

change it to sectionData

answered May 22, 2018 at 18:19

Antoniossss

32.7k7 gold badges67 silver badges119 bronze badges

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

6 Comments

tlt Over a year ago

and remove square brackets from [formArrayName]

Antoniossss Over a year ago

Or change to [formArrayName]='sectionData'" :)

tlt Over a year ago

or make a property on component sectionData:string = 'sectionData' :)

Silva Over a year ago

Manage to sort the error, the reason i was getting the error was because i was not calling or Initializing the sectionDataArray onInit. Thank you.

Antoniossss Over a year ago

Well basicly thas what I wrote - u were reffering to undefined property.

|

Collectives™ on Stack Overflow

Angular Form Array, first Index always null

1 Answer 1

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Linked

Related