Accessing ion-radio values in Ionic2 Form

Question

I'm trying to access values from checkboxes to do a quizz app, but I have two problems:

1. I get the following error: "EXCEPTION: Error trying to diff 'quizz.choice1' in [quizzs in Quizz1@3:10]".
2. I can't access the values of the checkboxes.

Here is my .html form:

<form #quizzForm="ngForm" (ngSubmit)="onSubmit(quizzForm.values)">

  <ion-list padding radio-group *ngFor="#quizz of quizzs">

      <ion-list-header text-center>
        QUIZZ 2
      </ion-list-header>

      <p text-justify>
        <b text-uppercase>Question :</b>
        <span courant>{{quizz.question}}</span>
      </p>

      <ion-item>
        <ion-label>{{quizz.choice1}}</ion-label>
        <ion-radio
            ngControl="choice1"
            #choice1="ngForm"
            value="quizz.choice1">
        </ion-radio>
      </ion-item>

      <ion-item>
        <ion-label>{{quizz.choice2}}</ion-label>
        <ion-radio
            ngControl="choice2"
            #choice2="ngform"
            value="quizz.choice2">
        </ion-radio>
      </ion-item>

      <ion-item [hidden]="!quizz.choice3">
        <ion-label>{{quizz.choice3}}</ion-label>
        <ion-radio
            ngControl="choice3"
            #choice3="ngform"
            value="quizz.choice3">
        </ion-radio>
      </ion-item>

      <ion-item [hidden]="!quizz.choice4">
        <ion-label>{{quizz.choice4}}</ion-label>
        <ion-radio
            ngControl="choice4"
            #choice4="ngform"
            value="quizz.choice4">
        </ion-radio>
      </ion-item>

      <br/><br/>

      <div style="width:50%; margin: 0 auto">
        <button
          type="submit"
          [disabled]="!choice1.checked && !choice2.checked && !choice3.checked && !choice4.checked"
          block light outline>
          Valider</button>
      </div>

      <br/>

      <div [hidden]="quizz.result != quizz.answer"
            [class.correct]="correct"
            [class.false]="!correct">
        <b text-uppercase>Réponse :</b>
        <span courant>{{quizz.answer}}</span>
        <br/>
        <p bluegray text-uppercase>Explication : </p>
        <span>{{quizz.explication}}</span>
      </div>

  </ion-list>

</form>

And this is the .ts I am building:

import {Page, NavController} from 'ionic-angular';
import { FORM_DIRECTIVES, FormBuilder,  ControlGroup, Validators, AbstractControl } from 'angular2/common';

@Page({
  templateUrl: 'build/pages/quizz/quizz2/quizz2.html',
  directives: [FORM_DIRECTIVES]
})

export class Quizz2 {

  quizzForm: ControlGroup;
  question = '';
  choice1: AbstractControl;
  choice2: AbstractControl;
  choice3: AbstractControl;
  choice4: AbstractControl;
  answer = '';
  explication = '';
  isValid = false;

  quizzs  = [

    {
      question : `Le pictogramme représentant une personne
                  handicapée est réservé uniquement à une personne
                  handicapée en fauteuil`,
      choice1 : 'vrai',
      choice2 : 'faux',
      choice3 : '',
      choice4 : '',
      answer : 'faux',
      explication : `La délivrance du pictogramme par la COTOREP
                      dépend en effet du taux d’invalidité (80%)
                      quelque soit le handicap`
    }
  ]

    constructor(public nav: NavController, fb: FormBuilder) {
      this.nav = nav;

      this.quizzForm = fb.group({
        choice1: ['',],
        choice2: ['',],
        choice3: ['',],
        choice4: ['',]
      });
      this.choice1 = this.quizzForm.controls['choice1'];
      this.choice2 = this.quizzForm.controls['choice2'];
      this.choice3 = this.quizzForm.controls['choice3'];
      this.choice4 = this.quizzForm.controls['choice4']
    }

    onSubmit(values) {
      console.log('Formulaire:' ,values);
    }

What am I doing wrong? Anybody have an idea? Thanks.

Answer 1

First remember radio-groups only allow for one button checked at a time. If you need multiple selection you should consider using checkboxes.

To access and manipulate the value of the radio buttons you must declare ngModel at the radio-group level, like [(ngModel)]="radioValue". In this case radioValue will hold the value of the radio selected, and viceversa.