Binding and Using ngModel with Multi-nested JSON Object

Question

I'm trying to bind and use ngModel with a JSON object that is double nested. This is what I'm trying to use: (Calendar from PrimeNG)

<div *ngFor="let field of fields;">
    <div *ngFor="let player of field.players; let i = index;">
        PlayerID: {{player.playerid}}
        <div *ngFor="let goal of player.goals; let j = index;">
            {{goal.timestamp}} <p-calendar [showTime]="true" dateFormat="yy-mm-dd" timeFormat="hh:mm" required [(ngModel)]="field.players[i].goals[j].timestamp"></p-calendar></span><br>
        </div>
    </div>
</div>

However, only the first date value in the array is binded correctly, the others do not work at all.

Julian W. · Accepted Answer · 2019-05-30 19:13:16Z

1

Try to use index for the fields as well.

<div *ngFor="let field of fields; let fi = index;">
    <div *ngFor="let player of field.players; let i = index;">
        PlayerID: {{player.playerid}}
        <div *ngFor="let goal of player.goals; let j = index;">
            {{goal.timestamp}} <p-calendar [showTime]="true" dateFormat="yy-mm-dd" timeFormat="hh:mm" required [(ngModel)]="fields[fi].players[i].goals[j].timestamp"></p-calendar><br>
        </div>
    </div>
</div>

edited May 30, 2019 at 19:13

answered May 30, 2019 at 18:56

Julian W.

1,5819 silver badges20 bronze badges

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

4 Comments

mewi Over a year ago

Still appears to produce the same issue.

Julian W. Over a year ago

I just tried it on stackblitz.com/edit/angular-dbjdyw and it worked. I noticed that you added </span> without opening <span>. Is it a typo?

Martin Parenteau Over a year ago

It may be that this markup is inside a form tag, and that each input field must have a different name.

mewi Over a year ago

I appreciate the help. It was a missing index and I had a goofy typo.

Collectives™ on Stack Overflow

Binding and Using ngModel with Multi-nested JSON Object

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related