以Ionic2形式

Question

我正在尝试访问复选框中的值以执行quizz应用程序，但我有两个问题：

1. 我收到以下错误：“EXCEPTION：尝试差异时出错 [quizz.choice1]在[quizzs in Quizz1 @ 3:10]“。
2. 我无法访问复选框的值。

这是我的.html表格：

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

这就是我正在建设的.ts：

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);
    }

我做错了什么？有人有想法吗？ 感谢。

Answer 1

首先记住，无线电组只允许一次检查一个按钮。如果您需要多个选择，则应考虑使用复选框。

要访问和操作单选按钮的值，您必须在ngModel级别声明radio-group，例如[(ngModel)]="radioValue"。在这种情况下，radioValue将保留所选广播的value，反之亦然。