CODEWITHSUNDEEP
htmlangulartypescriptprimeng
mewi
mewi

Reputation: 352

Binding and Using ngModel with Multi-nested JSON Object

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.

Upvotes: 0

Views: 1201

Answers (1)

Julian W.
Julian W.

Reputation: 1571

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>

Upvotes: 1

Related Questions