CODEWITHSUNDEEP
angularangular5
Gargoyle
Gargoyle

Reputation: 10294

Bind to property inside *ngFor

I've got a simple table loop but I can't get the selected radio button to update the property. I've written this HTML:

<tr *ngFor="let question of questionsFor(category)">
    <td>{{ question.question }}</td>
    <td>
        <input type="radio" value="1" name="{{ question.id }}" [ngModel]="question.pass">Pass
        <input type="radio" value="0" name="{{ question.id }}" [ngModel]="question.pass">Fail
    </td>
</tr>

When I hit the submit button and look at the pass properties in the questions array, they're all set to undefined.

The questions array is just a simple class.

export class SmbwaQuestion {
    id: number;
    question: string;
    pass: number;
}

Upvotes: 0

Views: 780

Answers (1)

Poul Kruijt
Poul Kruijt

Reputation: 71891

To trigger two way binding, you should use the [(ngModel)] notation, otherwise the value does not get updated in the parent component

<input type="radio" value="1" name="{{ question.id }}" [(ngModel)]="question.pass">Pass
<input type="radio" value="0" name="{{ question.id }}" [(ngModel)]="question.pass">Fail

Upvotes: 3

Related Questions