angular - cómo generar dinámicamente formGroups dentro de un ngFor en un acordeón

Tengo un acordeón que crea un número de secciones x según lo solicite el usuario, como sigue:

en este caso el número de secciones era 3, habiendo entendido esto, debo cargar la información de los empleados por formulario, pero al cargar una vez la información se duplica en los otros formularios:

He intentado hacer un array de formGroups en ts y diferenciarlos mediante el índice de ngfor, así:

pero no he tenido éxito.

Respuesta #1

deberías usar 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])],
           ...
        });
 }

hay un ejemplo aquí: https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2