Angular Nested Forms Error - Cyclic Object Value

Question

I have a parent form, and a child for within a main component. I am trying to get the main component to read the data from the parent form, but am getting an error: cyclic object value in the console.

My guess is that it is the parent form being defined in form-one and form-two, but I don't know how to do the following:

1) create a nested reactive form (form-two) that is shared with the parent form (form-one)
2) Allow the main component to access the form value of the parent and nested form.

My stackblitz example: https://stackblitz.com/edit/angular-dkddez

What am I doing wrong?

bryan60 · Accepted Answer · 2020-01-16 18:04:12Z

1

the error you're seeing is because you're applying the json pipe to a form group, which just isn't going to work because it has a recursive structure that can't be represented in string. apply it to the value:

{{formComponent.parentForm?.value | json }}

if you want all components to use the same form group, then make sure you're actually passing it to your sub component:

<app-form-two [parentForm]="parentForm"></app-form-two>

answered Jan 16, 2020 at 18:04

bryan60

29.5k5 gold badges56 silver badges71 bronze badges

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

Collectives™ on Stack Overflow

Angular Nested Forms Error - Cyclic Object Value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related