Angular 4 und ngForm - nicht ausgewählte Optionsfeldoptionen werden gesendet

Question

Ich habe ein einfaches Quiz mit einer Reihe von Fragen und mit jeder Frage mit 4-5 Multichoice-Optionen. Die richtige Option wird ausgewählt, indem Sie auf eine zugeordnete Optionsschaltfläche klicken.

Wenn ich das Formular absende, werden die ausgewählten Optionen an den Server gesendet, ABER das ist auch die letzte Option jeder unbeantworteten Frage.

Die Vorlage/Code, um das Quiz zu erstellen ist:

<form #f="ngForm" (ngSubmit)="onSubmit(f)" class="form-horizontal">      
    <div *ngFor="let item of aData; let i=index"> 
    <p class="question"><strong>Question {{i+1}}.</strong> <span [innerHTML]="item['question'] | keepHtml"></span></p> 
    <ul class="nobullet"> 
     <li class='mcqoptions' *ngFor="let mcq of item.mcq"> 
      <label> 
      <input type="radio" name="option{{i}}" [ngModel]="mcq['mcqID']" value="{{mcq['mcqID']}}" ><span [innerHTML]="mcq['mcqoption'] | keepHtml"></span> 
      </label> 
     </li> 
    </ul> 
     <p id="qfb{{item['questionID']}}" class="quizfback"></p> 
     <input type="hidden" name="questionID{{i}}" [ngModel]="item['questionID']"/> 
    </div> 
    <div style="padding:20px 0" class="form-group"> 
     <div class="col-sm-12 controls"> 
     <button type="submit" class="btn btn-success">Submit this quiz</button> 
     </div> 
    </div> 
</form> 

Die einreichen Funktion ist:

onSubmit(f):void{  
const dataToSave = f.value; 
this.service.processQuiz('processquiz', dataToSave).subscribe(
    fback => { 
    this.submitPending = false;     
    this.msg = fback.msg; 
    this.bMessage = true; 
    }, error => { 
    this.submitPending = false; 
    },() => { 
    this.submitPending = false; 
    } 
); 

ich hier etwas fehlt bin, aber ich kann es nicht finden.

Dank/Tom

Answer 1

Zuerst bitte auf den Rest des Codes für die Komponente zeigen.

Zweitens haben Sie den Wert für jede Optionsschaltfläche bereits voreingestellt, bevor der Benutzer die Option auswählt. Selbst wenn sie keine Auswahl treffen, wird bereits ein Wert gesendet, der gesendet wird onSubmit. value="{{mcq['mcqID']}}"

<input type="radio" name="option{{i}}" [ngModel]="mcq['mcqID']" value="{{mcq['mcqID']}}" ><span [innerHTML]="mcq['mcqoption'] | keepHtml"></span>