I am currently working on displaying users' names and a list of their courses in an Angular project. Each user has a different number of courses, so I am experimenting with using Angular Form Array to achieve this functionality.
Below is a snippet from my TypeScript file:
this.form = this.fb.group({
name: [''],
courses: this.fb.array([
this.fb.group({
name: [''],
})
]),
});
get courses() {
return this.form.controls["courses"] as FormArray;
}
and in my HTML file:
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div class="mb-3">
<label>Name</label>
<input type="text" formControlName="name"/>
</div>
<div class="mb-3">
<label>Courses</label>
<div formArrayName="courses">
<div *ngFor="let course of courses.controls; let i = index">
<div [formGroupName]="i">
<input type="text" formControlName="name"/>
</div>
</div>
</div>
</div>
</form>
I am facing an issue where a user with two courses is only displaying one of them. Can anyone help me troubleshoot this problem?
Happy new year! :)