Angular reactive form binding not working

Question

I'm trying to create nested reactive forms here : https://stackblitz.com/edit/angular-mgrfbj

This is the project heirarchy:

---create company form (hello.component.ts)
    --- company details form (company-details.component.ts)
    --- [
        employee details form (employee-details.component.ts)
        employee details form
        employee details form ...
        ]

For such nested forms, I have to use ViewProviders and FormGroupDirective as given in this video:

The first nested form (company-details.component.ts) is working as expected

But the second form which is added with *ngFor inside a FormArray is not binding to the FormGroupDirective correctly.

When you type the company details and press Print Json, then the printed json will be correct. But when you add an employee or two, then the employee details are not printed in the json.

I know there are other manual ways to accomplish the same thing, but I'm looking for a clean solution that just works without any extra functions.

Any help will be really appreciated!

Thanks in advance

did you notice that this.fgd is undefined in your employee-details ? — Florian

Eliseo Eliseo · Accepted Answer · 2018-12-12T10:00:20

there are to make several changes in your code

1.-The employed.details.component.html

<!---see that is [formGroup], not formGroupName-->
<div [formGroup]="employee">
  <h4 class="row">Employee no. {{index+1}}</h4>
  <div class='col-md-8'>
    <input formControlName="name" placeholder="Name">
  </div>
  <div class='col-md-8'>
    <input formControlName="planet" placeholder="Planet">
  </div>
</div>

2.- the employed.details.component.ts, becomes as

  employee: any;
  @Input() index;
  //inject the ForumGroupDirective in the variable fgd    
  constructor(private fb: FormBuilder,
              private fgd: FormGroupDirective) {}

  ngOnInit() {
    //get the FormArray of "employees"
    const array=(this.fgd.form.get('employees') as FormArray);

    //Simple push to the array
    array.push(this.fb.group({
      name: '',
      planet: ''
      }));
    //the formGroup must be array.at(index)
    this.employee = array.at(this.index)
  }

Finally, when remove the employe you must remove the element in the array

  removeEmployee() {
    this.employeesCount -= 1;
    (this.form.get('employees') as FormArray).removeAt(this.employeesCount);
  }

see the stackblitz

Angular reactive form binding not working

1 Answers