Angular 4 和 ngForm - 正在提交未选中的单选按钮选项答案

【问题标题】：Angular 4 and ngForm - unselected radio button options are being submittedAngular 4 和 ngForm - 正在提交未选中的单选按钮选项
【发布时间】：2017-10-17 20:20:31
【问题描述】：

我有一个简单的测验，包含一组问题，每个问题都有 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;
  } 
);

我在这里遗漏了一些东西，但我找不到。

谢谢/汤姆

【问题讨论】：

每个选项的默认值是否设置为 null，为什么不将值更改为 [value] = mcq['mcqID']
感谢您的回复。不幸的是，我不明白任何一点。默认值如何设置为null？这不是在“普通”HTML 表单中明确完成的。它是如何在 Angular 中以表单形式显式完成的？
[ngModel]="mcq['mcqID']" value="{{mcq['mcqID']}}" 根据我的理解应该不一样，你总是选择值和它总是最后一个的事实是因为 radio 只选择一个值，所以最后一个保留为您为未回答的问题选择的值。

标签： angular angular2-ngmodel

【解决方案1】：

首先请展示该组件的其余代码。

其次，您已经在用户选择之前预先设置了每个单选按钮的值，因此即使他们没有进行选择，也已经有一个值将被发送onSubmit。 value="{{mcq['mcqID']}}"

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

【讨论】：