1

I have a select tag inside my FormArray and i have fetched option for that select using http from the api. I have following error help me.

CashPluckingLeafComponent.html:44 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

enter image description here enter image description here

 <div formArrayName="leaf_grade">
                    <div *ngFor="let grades of cplForm.controls.leaf_grade.controls; let i=index">
                        <div [formGroupName]="i">
                            <div class="form-group">
                                <label>Leaf Grade {{i + 1}}</label>
                                <select name="grade" formControlName="grade" class="form-control" id="grade">

                                    <option *ngFor='let lg of grades' [value]="lg.name">{{ lg.name }}</option>
                                </select>
                                <small *ngIf="!cplForm.controls.leaf_grade.controls[i].controls.grade.valid && cplForm.controls.leaf-grade.controls[i].controls.grade.touched">
                                    Leaf Grade is required
                                </small>
                                <div>
                                    <span *ngIf="cplForm.controls.leaf_grade.controls.length > 1" class="remove-form-control">
                                        <a (click)="removeGradeData(i)">
                                        <i class="fa fa-times fa-fw" aria-hidden="true"></i> Remove
                                        </a>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

grades contain from console.log(grades)

(2) [Object, Object] 0: Object 1: Object length: 2

Sagun Gautam
  • 470
  • 6
  • 20
  • 2
    You're passing an object to `*ngFor` but it only supports an array. I don't see a way to help from here, because it's not possible to derive from the provided information what exactly is passed to `*ngFor`. – Günter Zöchbauer Jul 03 '17 at 11:49
  • add the data format what you are trying to loop. The error explains you are trying to loop objects or something else instead of `Array` – mayur Jul 03 '17 at 11:53
  • console.log(grades) outputs : (2) [Object, Object] 0: Object 1: Object length: 2 – Sagun Gautam Jul 03 '17 at 12:04

1 Answers1

2

The problem you have is that you have overlapping names. The array you want to iterate has the same name as each form object in your form array that you are iterating in your template:

<div *ngFor="let grades of cplForm.controls.leaf_grade.controls; let i=index">

So now in your template Angular is trying to iterate the form group grades instead of your array of grades. You need to rename either, for example the iteration of the form array...

<div *ngFor="let gradesGroup of cplForm.controls.leaf_grade.controls; let i=index">
AT82
  • 71,416
  • 24
  • 140
  • 167
  • oops! such a small mistake wasted my hour searching the solution. Thanks. – Sagun Gautam Jul 03 '17 at 16:09
  • No problem, glad I could help! :) – AT82 Jul 03 '17 at 16:10
  • validation inside formArray is not working. can you help me with it. `Invalid Input` – Sagun Gautam Jul 04 '17 at 02:10
  • 1
    That looks totally correct to me. By the way, you can shorten that with whatever name you chose for iteration, so if you chose `gradesGroup` you can use `gradesGroup.controls.grade.valid`. But as said, your code looks correct, could you recreate the issue in a plunker and I'll be happy to take a look :) – AT82 Jul 04 '17 at 06:41