Angular2 - 从POST请求的表单中的多个复选框选中值创建数组

I currently have a form with two checkboxes corresponding to each question in which I'm trying to get all the values from all the checked checkboxes and store them into an "answers" array. I will then use this answers array in my POST request to store the answers in my database.

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

Although I'm having trouble achieving this, my form currently looks like this, with the options coming dynamically from my database.

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

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

Can anyone help me achieve this? Thanks.

谁能帮我实现这个目标？谢谢。

1 个解决方案

#1

You can do something like below in your Template :

您可以在模板中执行以下操作：

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

and in component file :

并在组件文件中：

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

Here is the plunkr for the same.

这是同样的傻瓜。

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>

and in component ts file :

并在组件ts文件中：

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

#1