0
J'ai un simple quiz avec un ensemble de questions et chaque question ayant 4 ou 5 options multichoix. L'option correcte est sélectionnée en cliquant sur un bouton radio associé.Angular 4 et ngForm - des options de bouton radio non sélectionnées sont en cours de soumission
Lorsque je soumets le formulaire, les options sélectionnées sont envoyées au serveur, MAIS c'est aussi la dernière option de chaque question sans réponse.
Le modèle/code pour créer le quiz est:
<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>
La fonction d'envoi est:
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;
}
);
Je manque quelque chose ici, mais je ne peux pas le trouver.
Merci/Tom
est la valeur par défaut définie sur null pour toutes les options et pourquoi change pas la valeur à [valeur] = MCQ [ « mcqID »] – fastAsTortoise
Merci pour la réponse. Malheureusement, je ne comprends pas l'un ou l'autre point. Comment la valeur par défaut est-elle définie sur null? Ceci n'est pas explicitement fait dans un formulaire HTML "normal". Comment est-ce explicitement fait sous une forme dans Angular? – TomBaine
[ngModel] = "mcq ['mcqID']" value = "{{mcq ['mcqID']}}" ne devrait pas être la même selon ma compréhension, vous sélectionnez toujours la valeur et le fait que c'est toujours la dernière est parce que la radio sélectionne seulement une valeur ainsi le dernier reste comme valeur choisie pour la question qui sont sans réponse. – fastAsTortoise