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!

yurzui yurzui · Accepted Answer · 2019-01-05T19:18:50

There are several steps to make it working:

Change form template as follows:

<form [formGroup]="form">
  <app-company-details></app-company-details>
  <app-employee-details jsonname="employee1"></app-employee-details>
  <app-employee-details jsonname="employee2"></app-employee-details>
</form>

Create nested form group based on provided jsonname string:

employee-details.component.ts

@Component({
  selector: 'app-employee-details',
  viewProviders: [
    {
      provide: ControlContainer,
      useExisting: FormGroupDirective
    }
  ],
  ...
})
export class EmployeeDetailsComponent implements OnInit {
  @Input() jsonname;

  constructor(private fb: FormBuilder, private fgd: FormGroupDirective) { }

  ngOnInit() {
    const group = this.fb.group({
      name: new FormControl(),
      planet: new FormControl()
    });

    this.fgd.form.addControl(this.jsonname, group);
  }
}

employee-details.component.html

<div [formGroupName]="jsonname">
  ...
</div>

Stackblitz Example

Creating formGroupName dynamically not working - Angular reactive forms

3 Answers