Showing items in Form Array

Question

I need to show users' names and a list of their courses. Different users have different numbers of courses. Thus, I am trying Angular Form Array.

Here is my .ts:

this.form = this.fb.group({
  name: [''],
  courses: this.fb.array([
    this.fb.group({          
      name: [''],     
    })
  ]),
});

get courses() {
  return this.form.controls["courses"] as FormArray;
}

and my .html:

<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>

The problem is that a user has two courses but only one of the courses is shown! Does anyone know what is the problem?

P.s. Happy new year :)

Answer 1

You have to ensure each course instance will require a FormGroup instance in the courses array.

for (let course of this.data.courses) {
  let courseFormGroup = this.newCourseFromGroup();
  courseFormGroup.patchValue(course);

  this.courses.push(courseFormGroup);
}

To avoid code duplication in creating a Course FormGroup, suggest creating a function as below:

newCourseFromGroup() {
  return this.fb.group({
    name: [''],
  });
}

Also, concerned that your current code will add a FormGroup instance into the courses FormArray. This will result an additional FormGroup instance would be added if you push the FormGroup as my proposed code.

Thus, you should only initialize the FormArray by adding a default FormGroup for courses FormArray if the data doesn't exist as below:

this.form = this.fb.group({
  name: [''],
  courses: this.fb.array([]),
});

if (this.data) {
  for (let course of this.data.courses) {
    let courseFormGroup = this.newCourseFromGroup();
    courseFormGroup.patchValue(course);

    this.courses.push(courseFormGroup);
  }
} else {
  this.addCourse();
}

Demo @ StackBlitz