Update: The issue lies in this line of code:
this.testModuleForm.controls['questions']
.setValue(this.setQuestions()); //<--INCORRECT
Instead, it should simply be a call to the function:
// This is the correct way:
this.setQuestions() //<--CORRECT
It's important to note that we are not assigning a value directly to the array "questions", but rather the setQuestions function assigns a value to the formGroup.
Note: When managing a FormArray, remember to loop over the formArray.controls and not over a variable.
<!--INCORRECT--->
<div *ngFor="let question of testModule.questions;
let questionIndex=index">
<!--CORRECT--->
<div *ngFor="let question of questions.controls;
let questionIndex=index">
If you have a FormArray inside another FormArray, you need a function to access the inner FormArray - it cannot be accessed directly as a getter. In this case, use the getAnswer function to retrieve the answers.
<!--INCORRECT-->
<div *ngFor="let answer of testModule.questions[questionIndex].answers;
let answerIndex=index">
<!--CORRECT-->
<div *ngFor="let answer of getAnswers(questionIndex).controls;
let answerIndex=index">
getAnswer(index:number)
{
return this.questions.at(index).get('answers') as FormArray
}
NOTE: I haven't reviewed your specific code (and am unsure if you are indeed using a FormArray), this is just intended as guidance.
NOTE2: You can check in the .html file by using:
<pre>
{{testModuleForm?.value|json}}
</pre>
This allows you to verify if the data matches your expectations before proceeding further with the form.