角4とngForm - 選択されていないラジオボタンのオプションが送信されています

Question

私は、一連の質問と各質問に4-5のマルチチョイスオプションを持つ簡単なクイズを持っています。関連するラジオボタンをクリックすると、正しいオプションが選択されます。

フォームを送信すると、選択したオプションがサーバーに送信されますが、未回答の質問の最後のオプションもあります。

クイズを作成するためのテンプレート/コードは次のとおりです。

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

提出する機能は次のとおりです。

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

私はここで何かが欠けていますが、私はそれを見つけることができません。

感謝/トム・

Answer 1

まずコンポーネントのコードの残りの部分を表示してください。

第2に、ユーザーが選択する前に既に各ラジオボタンに値を事前に設定しているため、選択しなくてもすでに値が入力されています。onSubmit。 value="{{mcq['mcqID']}}"

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