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

Yong Shun · Accepted Answer · 2024-01-02 00:46:00Z

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

Collectives™ on Stack Overflow

Showing items in Form Array

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related