Ionic2,Angular2: [(ngModel)] for ion-checkbox or html checkbox? - html

Question

What should the [(ngModel)] in the following case be,such that I can persist the state of the checkbox in the slide ? I need to slide from one slide to another upon selecting the checkboxes but when I click previous the state needs to be persisted.
Here is what I've for radio buttons. I just changed the radio buttons code into checkbox but it is not working.So I removed the [value] property and now if I select one checkbox, all of them are getting checked.
<ion-content padding>
<ion-slides>
<ion-slide *ngFor="let question of questions; let i = index">
<h1>{{ question.text }}</h1>
<span *ngIf="question.type=='singlecorrect'>
<ion-list radio-group [(ngModel)]="question.answer">
<ion-item no-lines no-padding *ngFor="let choice of question.choices">
<ion-label>{{ choice.choiceText }}</ion-label>
<ion-radio [value]="choice"></ion-radio>
</ion-item>
</ion-list>
</span>
<span *ngIf="question.type=='singlecorrect'>
<ion-list checkbox-group [(ngModel)]="question.answer">
<ion-item no-lines no-padding *ngFor="let choice of question.choices">
<ion-label>{{ choice.choiceText }}</ion-label>
<ion-checkbox></checkbox> // ERROR : no value accessor found.
</ion-item>
</ion-list>
</span>
<ion-row margin-top>
<ion-col>
<button (click)="showPrevious()" ion-button text-only [disabled]="i === 0" >Previous</button>
</ion-col>
<ion-col>
<button [disabled]="!question.answer" *ngIf="i < questions.length - 1" (click)="showNext()" ion-button text-only >Next</button>
<button [disabled]="!question.answer" *ngIf="i === questions.length - 1" (click)="showNext()" ion-button text-only >Submit</button>
</ion-col>
</ion-row>
</ion-slide>
</ion-slides>
</ion-content>
I'm storing the selected choices in an array called "answer".Refer this:Angular2,Typescript: How to put the radio button checked when in an array which displays one element per page?
Can someone help me? Thanks in advance.

Answer 1

I'm not sure if all questions should use checkboxes, or just some of them. I've modified the previous plunker to set some questions as a multiple choice question and left the rest as single choice questions. Please take a look at the new version of the plunker
This is the end result:
In the demo, now each question has the following properties:
{
text: 'Question 1',
multiple: false,
choices: [...],
answer: null
}
If the question allows multiple answers, then the answer property is initialized with an array, with one item per available choice of that question.
// Initialize the answers
this.questions.forEach(question => {
if(question.multiple) {
// Initialize an array with as many elements as the number of choices
question.answer = new Array(question.choices.length);
}
});
Then in the view we render radio items or checkbox items accordingly:
<ion-slides>
<ion-slide *ngFor="let question of questions; let i = index">
<h1>{{ question.text }}</h1>
<!-- Single choice: radio items -->
<div *ngIf="!question.multiple">
<ion-list radio-group [(ngModel)]="question.answer">
<ion-item no-lines no-padding *ngFor="let choice of question.choices">
<ion-label>{{ choice.choiceText }}</ion-label>
<ion-radio [value]="choice"></ion-radio>
</ion-item>
</ion-list>
</div>
<!-- Multiple choice: checkbox items -->
<div *ngIf="question.multiple">
<ion-item no-lines no-padding *ngFor="let choice of question.choices; let i = index">
<ion-label>{{ choice.choiceText }}</ion-label>
<ion-checkbox [(ngModel)]="question.answer[i]"></ion-checkbox>
</ion-item>
</div>
<span style="font-size: 1.2rem;">Selected answer: {{ question.answer | json }}</span>
<ion-row margin-top>
<ion-col>
<button (click)="showPrevious()" ion-button text-only [disabled]="i === 0" >Previous</button>
</ion-col>
<ion-col>
<button [disabled]="!question.answer" *ngIf="i < questions.length - 1" (click)="showNext()" ion-button text-only >Next</button>
<button [disabled]="!question.answer" *ngIf="i === questions.length - 1" (click)="showNext()" ion-button text-only >Submit</button>
</ion-col>
</ion-row>
</ion-slide>
</ion-slides>