Angular2 - Créer un tableau à partir de plusieurs cases cochées dans le formulaire pour la requête POST

Question

J'ai actuellement un formulaire avec deux cases à cocher correspondant à chaque question dans laquelle j'essaie d'obtenir toutes les valeurs de toutes les cases cochées et de les stocker dans un "réponses" tableau. J'utiliserai alors ce tableau de réponses dans ma requête POST pour stocker les réponses dans ma base de données.

Bien que j'éprouve des difficultés pour y parvenir, mon formulaire ressemble à ceci: les options proviennent dynamiquement de ma base de données.

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

Quelqu'un peut-il m'aider à atteindre cet objectif? Merci.

Answer 1

Vous pouvez faire quelque chose comme ci-dessous dans votre modèle:

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

et dans le fichier composant:

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

Voici le plunkr pour la même.

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> 

et dans le fichier ts composant:

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