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

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

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

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

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

1 个答案: