Angular FormGroup in Storybook: Converting circular structure to JSON

I'm work with angular and storybook. I have a FormGroup and FormArray in my model but they are not working with storybook.

a.stories.ts ->

import { CommonModule } from '@angular/common';
import { FormArray, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { Meta, moduleMetadata, Story } from '@storybook/angular';

export default {
title: 'Example/A',
component: AComponent,
decorators: [
moduleMetadata({
imports: [
CommonModule,
ReactiveFormsModule,
],
providers: [],
}),
],
} as Meta;

const Template: Story<AComponent> = (args: AComponent) => ({
props: args,
});

export const Costs = Template.bind({});
Costs.args = {
model: {
questions: [
{
...,
"question": "lorem ipsum",
"formGroup": new FormGroup({
answers: new FormArray([
new FormGroup({
"Q020_A001": new FormControl(null, [Validators.required]),
"Q020_A002": new FormControl(null, [Validators.required]),
}),
]),
}),
"answers": [
{
...,
"answerCode": "Q020_A001",
},
{
...,
"answerCode": "Q020_A002",
},
],
}
],
},
};


I get an error in storybook ->

TypeError: Converting circular structure to JSON
--> starting at object with constructor 'FormGroup'
| property 'controls' -> object with constructor 'Object'
| property 'answers' -> object with constructor 'FormArray'
--- property '_parent' closes the circle
at JSON.stringify (<anonymous>)


It works if "formGroup" is empty. ->

"formGroup": new FormGroup({
}),


But if "formGroup" is not empty, it won't work. ->

"formGroup": new FormGroup({
asd: new FormControl(''),
}),


How can I fix this?

Continue reading...