Angular2 - 複数のチェックボックスのチェックボックスの値をPOSTリクエスト用フォームに作成

Question

私は現在、チェックされたすべてのチェックボックスからすべての値を取得しようとする各質問に対応する2つのチェックボックスを持つフォームを持っています。 "答え"の配列。私は私のPOSTリクエストでこの答えの配列を使用して、データベースに回答を保存します。

私はこれを達成するのに問題がありますが、私のフォームは現在、私のデータベースからオプションが動的に来るように、このように見えます。

<form class="quiz-form"> 
    <div *ngFor="let option of quiz"> 

    <label> {{option.question}}: </label> 

    <input type='checkbox' name='checkbox'/> 
    <label>{{option.choice1}} </label> 

    <input type='checkbox' name='checkbox'/> 
    <label>{{option.choice2}} </label> 

    </div 
<button type="submit" value="Submit"> Complete quiz </button> 
</form> 

これを達成する手助けがありますか？ありがとう。

Answer 1

あなたは、テンプレートに以下のような何かを行うことができます。

<form class="quiz-form"> 
    <div *ngFor="let option of quiz"> 

    <label> {{option.question}}: </label> 

    <input type='checkbox' name='{{option.choice1}}' value="{{option.choice1}}" (change)="selectAnswer(option, $event)"/> 
    <label>{{option.choice1}} </label> 

    <input type='checkbox' name='{{option.choice2}}' value="{{option.choice2}}" (change)="selectAnswer(option, $event)"/> 
    <label>{{option.choice2}} </label> 
    </div> 
<button type="submit" value="Submit"> Complete quiz </button> 
</form> 

およびコンポーネントファイルで：

ここ

selectAnswer(category, event) { 
     var index = this.answer.indexOf(event.target.value); 
     if (event.target.checked) { 
      this.answer.push(event.target.value); 
     } else { 
      if (index !== -1) { 
       this.answer.splice(index, 1); 
      } 
     } 
     console.log(this.answer); 
    } 

が同じためplunkrです。

EDIT

<form class="quiz-form" (ngSubmit)="submitForm()"> 
    <div *ngFor="let option of quiz"> 

    <label> {{option.question}}: </label> 

    <input type='checkbox' name='{{option.choice1}}' value="{{option.choice1}}" (change)="selectAnswer(option, $event)"/> 
    <label>{{option.choice1}} </label> 

    <input type='checkbox' name='{{option.choice2}}' value="{{option.choice2}}" (change)="selectAnswer(option, $event)"/> 
    <label>{{option.choice2}} </label> 
    </div> 
<button type="submit" value="Submit"> Complete quiz </button> 
</form> 

とコンポーネントTSファイルに：

submit(){ 
    this.answer=[]; 
    }