CODEWITHSUNDEEP
angulartypescriptionic-framework
Sebastian Castaño
Sebastian Castaño

Reputation: 55

how to dynamically generate formGroups within an accordion ngFor

I have an accordion which creates a number of sections x as requested by the user, as follows:

enter image description here

in this case the number of sections was 3, having understood this, I must load the information of the employees by form, but when loading once the information is duplicated in the other forms:

enter image description here

I have tried to make an array of formGroups in ts and differentiate them by means of the ngfor index, like this:

enter image description here

but I have not had success.

Upvotes: 2

Views: 1062

Answers (1)

Paola Reyes
Paola Reyes

Reputation: 162

you should use FormArray

this.formName = this.formBuilder.group({
   'formArrayName': this.formBuilder.array([
    this.init(),
  ]),
});

 init() {
   return this.formBuilder.group({
          'id': ['', Validators.compose([Validators.required])],
          'name': ['', Validators.compose([Validators.required])],
          'phone_number': ['', Validators.compose([Validators.required])],
           ...
        });
 }

there's an example here: https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2

Upvotes: 1

Related Questions