I've been grappling with this issue for a few hours now, trying to find a solution that doesn't involve adding fields dynamically. All I need is the ability to access the properties of each form instance, but currently, it only displays one instance.
Check out the StackBlitz: https://stackblitz.com/edit/angular-dzzzql
HTML
<section class="exercises">
<form
fxLayout="column"
fxLayoutGap="2px"
[formGroup]="exerciseForm"
(ngSubmit)="onSubmit(exerciseForm.value)"
>
<ul *ngFor="let exercise of exercises">
<li>{{ exercise.instruction }}</li>
<ul *ngFor="let question of exercise.questions; let i = index">
<li>
{{ question.prefix }}
<mat-form-field>
<input
name="answer"
type="text"
id="answer"
matInput
formControlName="answer">
</mat-form-field>
{{ question.sufix }} -
{{ question.translation }}
</li>
</ul>
</ul>
<button type="submit" mat-raised-button color="primary">Submit</button>
</form>
</section>
Typescript
exercises: Exercise[]=[
new Exercise (
'Answer this question',
[new Question (1,'Eu','maluco','I am crazy'),
new Question (2,'Eu','doidinho','I am cuckoo')],
)]
constructor(private fb: FormBuilder) { }
exerciseForm = this.fb.group({
answer:['']
})
ngOnInit(): void {
}
onSubmit(answer: Answer) {
console.log(this.exerciseForm.value)
}
}