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

我有一组简单的测验，有一组问题，每个问题有4-5个多选项选项。通过单击关联的单选按钮来选择正确的选项。Angular 4和ngForm - 未提交单选按钮选项正在提交

当我提交表单时，选定的选项被发送到服务器，但是也是每个未答复的问题的最后一个选项。

模板/代码创建的测验：

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

我在这里失去了一些东西，但我无法找到它。

谢谢/ Tom

来源

2017-10-17 TomBaine

设置为NULL为每个选项的默认值，为什么不改变值[值] = MCQ [“mcqID”] – fastAsTortoise

感谢您的答复。不幸的是，我不明白这一点。如何将默认值设置为空？这不是在'普通'的HTML表单中明确进行的。它如何在Angular中的表单中明确地完成？ – TomBaine

[ngModel] =“mcq ['mcqID']”value =“{{mcq ['mcqID']}}”根据我的理解，不应该是相同的，你总是选择价值和事实，是因为收音机只选择一个值，所以最后一个值保持为您未选择问题的选定值。 – fastAsTortoise

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

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

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

来源

2017-10-17 22:45:14 flashdave

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

回答

相关问题