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

Question

我目前有一个表单，其中有两个复选框对应于每个问题，我在其中尝试从所有选中的复选框中获取所有值并将它们存储到 "answers" 数组中。然后我将在我的 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。

编辑

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

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

Angular2 - Create array from multiple checkbox checked values in form for POST request

checkbox

angular2-forms

angular2-services

angular