I am working on a project, where I am getting questions from backend with multiple options. Now in one of question type - Multi choice grid question, we are trying to create view like this
for that in the html, I have written this code,
<!-- Multi choice grid questions -->
<div *ngIf="(quiz['quizObj']['questionType'] === questionType.MULTI_CHOICE_GRID)">
<div *ngFor="let ques of quiz['quizObj']['questionArray']; let i=index">
<span>{{ques['questionRow']}}</span>
<mat-radio-group [formControl]="selectedMultiChoiceGridOption"
(change)="onChangeOption(ques)">
<mat-radio-button class="example-radio-button"
*ngFor="let option of quiz['quizObj']['options']"
[value]="option" [checked]="checkMultiChoiceGridSelectedOption(option, ques)">
{{option.option}}
</mat-radio-button>
</mat-radio-group>
</div>
</div>
In the change event I am just pushing particular question and selected option into an array.
multiChoiceGridAnswers = [];
selectedMultiChoiceGridOption = new FormControl();
/* Multi choice grid question event - on change or on selecting any option */
onChangeOption(quesRow: any) {
const params = {
questionRow: quesRow,
selection: this.selectedMultiChoiceGridOption.value
};
const index = this.multiChoiceGridAnswers.findIndex((question) => {
return (quesRow['questionRowId'] === question['questionRow']['questionRowId']);
});
if (index === -1) {
this.multiChoiceGridAnswers.push(params);
} else {
this.multiChoiceGridAnswers[index] = params;
}
}
It works fine till now, but when I go to different question and come back again, I am facing an issue. When coming back to this question again, again I am creating one array by previously selected options and from that array I am checking If user has previously checked particular option or not.
/* In the Multi choice grid question type, getting status if particular option is previously selected */
checkMultiChoiceGridSelectedOption(option: any, ques: any) {
let isSelected = false;
if (this.multiChoiceGridAnswers.length > 0) {
this.multiChoiceGridAnswers.filter((answerData) => {
if ((answerData['questionRow']['questionRowId'] === ques['questionRowId'])) {
if (answerData['selection'] && (answerData['selection']['optionId'] === option['optionId'])) {
isSelected = true;
}
}
});
}
return isSelected;
}
But I am getting this kind of response on my view -
I believe it's because form control is not unique, because even checkMultiChoiceGridSelectedOption function returns false for second question's "Question row 2" - "true" option but still It consider as true. Is there any other way to bind data inside ngFor? (ngModel also not working.)
Thanks in advance.

