Creating formGroupName dynamically not working - Angular reactive forms

Question

I'm trying to create a ReactiveForm in Angular with this data heirarchy:

-company
  -name
  -city
-employee1
  -name
  -planet
-employee2
  -name
  -planet

I have created a component CompanyDetailsComponent and another EmployeeDetailsComponent

I want to reuse the EmployeeDetailsComponent with formGroupNames employee1 & employee2

Here's the code stackblitz

Actually I want to make it work for a variable number of employees I have to keep the structure flat(I can't use an array of employees, in which case I would have used the FormArray like this)

So to achieve this flat heirarchy structure I was trying to do it for 2 employees first.

Any help would be greatly appreciated

Thank you in advance!

Answer 1

I think you've since edited it with yurzui's suggestion, but I took a look and fixed a small bug that was preventing it from working and here's the link:

Stackblitz

You had square brackets around attributes that weren't pulling their values from the component. For example, I changed [jsonname]="employee2" to jsonname="employee2".

Hopefully it is working as intended now.