Working on an Angular 5 application with checkboxes. Data is retrieved from the database and mapped to a JavaScript object. Having trouble configuring the 'Selected' value. Currently, all checkboxes are checked in the result.
In the code below, 'option: [] --> 'optionSelected' is defined based on whether it is selected or not.
https://i.sstatic.net/VlDpe.png
Template
<div *ngSwitchCase="'checkbox'"> <small>checkbox</small>
<div *ngFor="let opt of question.options" >
<label class="container-vertical"> {{opt.value}}
<input type="checkbox" [formControlName]="question.key" [name]="opt.name" [value]="opt.key" [checked]="opt.optionSelected" />
<span class="checkmark2"></span>
</label>
</div>
</div>
Tried using ngModel as well. The property 'value' holds the ID of the selected key, but still, all checkboxes are checked in the final result.
<input type="checkbox" [formControlName]="question.key" [name]="opt.name" [value]="opt.key" [(ngModel)]="question.value" />
Component
else if (questionElementType=="checkbox")
{
let _checkBox = new CheckBoxQuestion ({
consultationId: questionsList[key].consultationId,
questionId: questionsList[key].questionId,
questionElementType: questionsList[key].questionElementType[0].title,
questionType: questionsList[key].questionType,
title:questionsList[key].title,
displayId: questionsList[key].displayId,
key: questionsList[key].questionId,
value: questionsList[key].answer.length<=0 ? null : questionsList[key].answer[0].answerValue.toLowerCase(),
label: questionsList[key].title,
order: 7,
options: questionsList[key].answerOptions.map(function(item){
return {"name": item.ReferenceKey, "key": item.preDefineAnswerOptionId, "value": item.text, "optionSelected": item.preDefineAnswerOptionId==questionsList[key].answer[0].answerValue? "true" : "false"}
}),
});
this.mappedQuestions.push(_checkBox);
}