Angular reactive form - Getting error while passing formArray to child component

Question

I have nested reactive form with formGroup and formArray in it.
When I tried to pass nested formArray to child component I am getting the below error as

FormArrayName must be used with a parent formGroup directive

Below is the parent form group

this.employeeForm= this.fb.group({
 employee: this.fb.group({
   name: [null],
   id: [null]
  }),
 address: this.fb.array({
   location: [null],
   city: [null]
 });
});

Parent Form component

<form [formGroup]="employeeForm">
  <app-address [address]="employeeForm.controls.address"></app-address>
</form>

Address child component html

<div [formArrayName]="address">
<div *ngFor="let item of address.controls;" [formGroupName]="i">
  <input type="text" formControlName="location">
</div>
</div>

Address child component ts

import { Component, OnInit, Input } from '@angular/core';
import { FormGroup, FormArray } from '@angular/forms';


@Component({
  selector: 'app-address',
  templateUrl: './address.component.html',
  styleUrls: ['./address.component.scss']
})
export class AddressComponent implements OnInit {

  constructor() { }
  @Input() address: FormArray;
  ngOnInit() {
  }

}

The overall form values are working fine when I did console.log(this.employeeForm)
Please check and suggest. Thanks for your kind help.

The error tries to say that formGroup and formControlName should be in the same template. Try using ng-content to use them in the same template. — user4676340
– user4676340, Commented Nov 13, 2018 at 14:36
Can you please provide a small example with the ng-content ? My form model is really big and has more than 100 fields. So I broken down into multi components. — Rajarajan Rajasekaran
– Rajarajan Rajasekaran, Commented Nov 13, 2018 at 16:00

nircraft · Accepted Answer · 2018-11-13 14:38:31Z

0

The code looks fine. The issue is where you are using a custom-component app-address for the child form-group.

Angular forms are not automatically registered when inside nested component. However you can workaround this by providing the outer FormGroup to the child component.

You should also be passing the formGroup instance along with control name to your custom component. And then create a form control under that formGroup in custom component. Your custom component will create the control virtually under the same formGroup that you have provided.

<app-address [address]="employeeForm.controls.identity" [formGroup]="yourFormGroup" [controlName]="controlName"></app-address>

In child component you can initialize the form:

ngOnInit() {
   let control: FormControl = new FormControl('', Validators.required);
   this.formGroup.addControl(this.controlName, control);
}

answered Nov 13, 2018 at 14:38

nircraft

8,5085 gold badges33 silver badges46 bronze badges

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

2 Comments

Rajarajan Rajasekaran Over a year ago

My form model is really big and has more than 100 fields.And I broken down into multi components. And from the above example lets assume that I am passing address formArray which has array of formGroup with many formControls(such as Line,City,Landmark, State, Country) How to pass each and every controlName to child component as per your example ? Thanks

nircraft Over a year ago

You can just keep passing these info to all the child and their nested child as needed.You may post a stackblitz link for me to take a look.

Collectives™ on Stack Overflow

Angular reactive form - Getting error while passing formArray to child component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related