An exam platform was developed where administrators could create quizzes. However, when attempting to edit a quiz, not all questions and options were displayed in the form array from the response. Surprisingly, editing and accessing array data locally worked perfectly.
HTML:-
<div
*ngFor="let list of trainingItemList; let i = index"
cdkDrag
class="orderTraining-list"
>
<div
(click)="getData(list.path,i,list.type,list.id,list.name,list.quizInstruction,list.quizTime,list.questionList, list.order)"
class="orderTraining-box"
>
<span class="btn-icon"
><i
class="buy-icon"
[class.bi-videocam]="list.type == 'video/mp4'"
[class.bi-wallpaper]="list.type == 'image/jpeg' && 'image/png'"
[class.bi-question-answer]="list.type == 'quiz'"
></i></span
>{{list.name}}
</div>
</div>
TS:-
ngOnInit() {
this.id = this.route.snapshot.params['id'];
if(this.id != null){
this.createName = 'Update Changes';
this.createTraining.editTraining(this.id).subscribe((response:any)=>{
this.trainingForm.get('trainingName').setValue(response.name);
this.trainingItemList = response.trainingItemList;
})
}
this.createQuizForm();
this.createForm();
}
trainingItemList: Array<TrainingItemList> = [];
getData(path, i, type,id, name, quizInstruction, quizTime, questionList) {
this.index = i;
this.type = type;
if (type == 'image/jpeg') {
this.format = 'image';
this.show = true;
this.showUpload = false;
this.showDelete = true;
this.showQuiz = false;
this.url = 'http://api/training/getMedia?path=' + path;
}
if (type == 'video/mp4') {
this.format = 'video';
this.show = true;
this.showUpload = false;
this.showDelete = true;
this.showQuiz = false;
this.url = 'http://api/training/getMedia?path=' + path;
}
if (type == 'quiz') {
this.showQuiz = true;
this.showUpload = false;
this.showDelete = false;
this.show = false;
this.quiz = true;
this.quizForm.patchValue({
id:id,
name: name,
order: this.position,
type: type,
path: null,
quizTime: quizTime,
quizInstruction: quizInstruction,
questionList: questionList
})
// this.quizForm.controls['questionList'] = this.fb.array(questionList.map((i:QuestionList)=>this.fb.group({questionText : i.questionText,
// optionList:this.fb.array(i.optionList.map((j:OptionList)=>this.fb.group(
// {optionText:j.optionText, isAnswer:j.isAnswer}
// )))
// })));
console.log(questionList);
console.log(this.quizForm.value.questionList);
}
}
createQuizForm() {
this.quizForm = this.fb.group({
id:[''],
name: ['', Validators.required],
type: ['quiz'],
path: [null],
order: this.position,
quizTime: ['', [Validators.required, Validators.pattern('^[1-9][0-9]*$')]],
quizInstruction: ['', Validators.required],
questionList: this.fb.array([this.initQuestions()]),
})
}
initQuestions(): FormGroup {
return this.fb.group({
id:[''],
questionText: ['', Validators.required],
optionList: this.fb.array([this.initOptions()]),
timestamp:['']
})
}
initOptions(): FormGroup {
return this.fb.group({
id:[''],
optionText: ['', Validators.required],
isAnswer: ['true', Validators.required],
timestamp:['']
})
}
export interface TrainingItemList {
id:number,
name: string,
order: number,
type: string,
path: string,
quizTime: number,
quizInstruction: string,
questionList: any
}
Output:- when receiving the response from the API in the getData function parameter questionList(getData(questionList)- https://i.sstatic.net/HhFjo.png
when simply editing the array without saving it into the API and calling the same function getData(questionList)-
https://i.sstatic.net/2pxly.png
As can be observed in the second Array above, only 1 question is retrieved whereas in the previous array there are 2 questions.
The output above is generated by the following code -
console.log(questionList);
console.log(this.quizForm.value.questionList);