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
– Florian, Commented Dec 12, 2018 at 9:20

Eliseo · Accepted Answer · 2018-12-12 10:00:20Z

3

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

answered Dec 12, 2018 at 10:00

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

penduDev Over a year ago

Saved my day! Also got to know about the reactive forms in more depth! Thank you so much!

Collectives™ on Stack Overflow

Angular reactive form binding not working

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related