Angular2 - 从多个复选框检查值创建数组以用于 POST 请求

Question

我目前有一个带有两个复选框的表单，对应于每个问题，我试图从所有选中的复选框中获取所有值并将它们存储到“答案”数组中。然后我将在我的 POST 请求中使用这个 answers 数组来将答案存储在我的数据库中。

虽然我无法实现这一点，但我的表单目前看起来像这样，选项动态来自我的数据库。

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

编辑

<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=[];
   }