Angular2,Typescript: How to put the radio button checked when in an array which displays one element per page?

Question

Let me explain it in detail.Sorry for the question framing.

I've an array of Objects which is stored in the REST API. That array contains questions and choices. Each question has 4 choices which are radio buttons.

I'm trying to display one question at a time on the same page along with the choices of the question. I've 2 buttons "previous" and "forward" which load the question on the same page.

When I click the next button the next question in the array along with the choices are displayed.When I click previous button the previous question is being displayed but not "with the checked radio button". Now my requirement is that the radio button checked in the previous question has to remain checked even after going to next question and when I click previous it has to show me which radio button have I checked.

I'm trying to use [checked] option available with the radio button.But I'm not able to get it.Here is my code:

        <div *ngIf="questions[indexVal]">
        {{indexVal+1}} {{questions[indexVal].Text}}
        <div *ngFor="let choiceObj of questions[indexVal].choices">
            <input name='question' type='radio' [value]='choiceObj' [(ngModel)]='selectedchoice'  (ngModelChange) = "storeChoice(choiceObj.choiceId,questions[indexVal])" 
[checked]="check(questions[indexVal])"/>

            <label [for]='choiceObj'> {{choiceObj.choiceText}} </label>

            </span>
        </div>
    </div>
    <button ion-button value="previous" (click)="PrevQues()" [disabled] = 
 "disableprev"> PREVIOUS </button>
    <button ion-button value="next" (click)="NextQues()"> NEXT </button>

Initially the indexVal=0 which means it is pointing to the first question.On clicking the next button it becomes indexVal+=1 and for previous it becomes indexVal-=1;

here is my typescript code. I'm trying to maintain an array called "answers" which stores the selected choice.

    storeChoice(choiceId, questions[indexVal])
{
      questions[indexVal].answers[0] = choiceId;

}

check(questions[indexVal])
{
  return questions[indexVal].answers[0];
}

Solution

Instead of using the selectedChoice property for all the checks, you can bind the answer to the questions[index].answer. Please take a look at this working plunker

This is the result:

As you can see in that plunker, I'm binding the answer to the question.answer directly:

  <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>

Please also notice that I'm using a slider to add a nice effect when changing the questions.

View code

<ion-content padding>

  <ion-slides>
    <ion-slide *ngFor="let question of questions; let i = index">
      <h1>{{ question.text }}</h1>
      <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 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>

</ion-content>

Component code

import { Component, ViewChild } from '@angular/core';
import { NavController, Content, Slides } from 'ionic-angular';

@Component({...})
export class HomePage {
  @ViewChild(Slides) slides: Slides;

  public questions: Array<{ text: string, answer: number, choices: Array<{choiceId: number, choiceText: string}> }>

  ngOnInit() {
    this.slides.lockSwipes(true);
  }

  constructor() {

    this.questions = [
      {
        text: 'Question 1',
        choices: [
            {
              choiceId: 1,
              choiceText: 'Choice 1-1'
            },
            {
              choiceId: 2,
              choiceText: 'Choice 1-2'
            },
            {
              choiceId: 3,
              choiceText: 'Choice 1-3'
            },
            {
              choiceId: 4,
              choiceText: 'Choice 1-4'
            }
          ],
        answer: null
      },
      {
        text: 'Question 2',
        choices: [
            {
              choiceId: 21,
              choiceText: 'Choice 2-1'
            },
            {
              choiceId: 22,
              choiceText: 'Choice 2-2'
            },
            {
              choiceId: 23,
              choiceText: 'Choice 2-3'
            },
            {
              choiceId: 24,
              choiceText: 'Choice 2-4'
            },

          ],
        answer: null
      },
      {
        text: 'Question 3',
        choices: [
            {
              choiceId: 31,
              choiceText: 'Choice 3-1'
            },
            {
              choiceId: 32,
              choiceText: 'Choice 3-2'
            },
            {
              choiceId: 33,
              choiceText: 'Choice 3-3'
            },
            {
              choiceId: 34,
              choiceText: 'Choice 3-4'
            },

          ],
        answer: null
      }
    ]

  }

  public showPrevious(): void {
    this.slides.lockSwipes(false);
     this.slides.slidePrev(500);
     this.slides.lockSwipes(true);
  }

  public showNext(): void {
    this.slides.lockSwipes(false);
    this.slides.slideNext(500);
    this.slides.lockSwipes(true);
  }

}

Comments

[Jayakrishnan]

Are you getting any error or it simply didn't work. If you can create a plunker, I will fix it.

[Impromptu_Coder]

I'm so sorry, it's not possible to provide a plunkr.The code is very lengthy and moreover the data into the questions comes from a REST API

[Impromptu_Coder]

Thank you so much.It worked perfectly. I was struggling with this for almost 3 days. Thanks a lot.

[Impromptu_Coder]

Can you please help me with what the [(ngModel)]=" " should be if I were to use a checkbox in place of radio buttons ? If I put the [(ngModel)]="question.answer" (where answer is an array), all the checkboxes are getting mark irrespective of what I check.

[sebaferreras]

Sorry, long day at work... I've added an answer in the other SO question.