How to use *ngFor to create repeating checkbox input fields in Angular

Question

I am trying to create multiple checkbox fields using ngFor. I have an array which consists of project ids, names and types. So, now I am trying to create multiple input checkbox fields according to the number of projects that I have.

The ng-serve works fine and shows no error but the browser shows the error on [(ngModel)] at the frontend.

The code that I have been trying with is below: Here is the definition of projectsList array:

    let loggedData = JSON.parse(localStorage.getItem('loggedInfo'));
        this.commonService.getProjectList(loggedData.value).then((response)=>{
            this.allProjectList = response;
            console.log('this.allProjectList',response);
            var checkedItems = [];
            for (var i = 0; i < Object.keys(response).length; i++) {
              this.projectsList.push({id: response[i].id, projectName: response[i].projectName, projectNumber: response[i].projectNumber})
            }
        });

And here is the template part in html:

    <tr *ngFor="let cl of projectsList; let i = index" [attr.data-index]="i"><td>
                                     <div style="width:150"><font style="font-size: 8pt;">{{cl.projectName}} - {{cl.projectNumber}}</font></div>
                                  </td>
                                  <td>
                                     <input class="form-check-input " type="checkbox" value="false" name="cl.projectNumber" [(ngModel)]="accountLoginPrivilegeModel.activeSubaccountView[cl.projectNumber]">
                                  </td>
                                  <td>
                                     <input class="form-check-input " type="checkbox" name="cl.projectNumber" [(ngModel)]="accountLoginPrivilegeModel.activeSubaccountTransfer[cl.projectNumber]">
                                  </td>
                               </tr>

And here is the error that I am getting at [(ngModel)].

Any help would be more than appreciable.

either accountLoginPrivilegeModel.activeSubaccountView or accountLoginPrivilegeModel.activeSubaccountTransfer is undefined on one or several of items — Andrei
– Andrei, Commented Jan 24, 2023 at 9:06
@Andrei could you please elaborate more? I am trying to understand your comment. As far as I know, the value inside the large brackets like [cl.projectNumber] is the culprit but have no idea how to resolve it. — saurav.rox
– saurav.rox, Commented Jan 24, 2023 at 9:34
Is says in the error it is in LoginprivilegeComponent line 102. So which line would that be? — SehaxX
– SehaxX, Commented Jan 24, 2023 at 9:43
@SehaxX The error is related to this line where ngModel is used: <input class="form-check-input " type="checkbox" value="false" name="cl.projectNumber" [(ngModel)]="accountLoginPrivilegeModel.activeSubaccountView[cl.projectNumber]"> — saurav.rox
– saurav.rox, Commented Jan 24, 2023 at 9:45
is getProjectList() http call? If that is so, this behaviour would make sense, since you are binding ngModels but you dont have *ngIf to check if array already has items — tony
– tony, Commented Jan 24, 2023 at 10:11

tony · Accepted Answer · 2023-01-26 08:33:08Z

0

Here is a small stackblitz example of what you are trying to do, but with dummy data.

stackblitz

answered Jan 26, 2023 at 8:33

tony

9655 silver badges13 bronze badges

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

1 Comment

saurav.rox Over a year ago

Thank you Tony for the clear response. Hope it will be helpful for others as well.

Collectives™ on Stack Overflow

How to use *ngFor to create repeating checkbox input fields in Angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related