Storybook 中的 Angular FormGroup：将圆形结构转换为 JSON

Question

我正在使用角度和故事书。我的模型中有一个 FormGroup 和 FormArray，但它们不适用于故事书。

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",
                    },
                ],
            }
        ],
    },
};

我在故事书中遇到错误 ->

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>)

如果“formGroup”为空，它可以工作。 ->

            "formGroup": new FormGroup({
            }),

但如果“formGroup”不为空，则不起作用。 ->

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

我该如何解决这个问题？

Answer 1

问题在于您提供给 Storybook 的每个 args，SB 会致电 JSON.stringify。这种设计是必需的，因为 SB 在运行时也使用您的 args 并允许您更改值。

在您的情况下，您创建了一个响应式表单模型，该模型导致对象无法通过JSON.stringify 转换为字符串。

要修复它，您需要：

1. 仅将参数作为原始数据提供给 SB
2. 更改 AComponent 中的逻辑以根据上面提供的数据创建模型

示例代码：

/// a.stories.ts
Costs.args = {
    model: {
        questions: [
            {
                ...,
                "question": "lorem ipsum",
                "formGroup": {
                    answers: [
                        {
                            "Q020_A001": null,
                            "Q020_A002": null,
                        }),
                    ]),
                },
                "answers": [
                    {
                        ...,
                        "answerCode": "Q020_A001",
                    },
                    {
                        ...,
                        "answerCode": "Q020_A002",
                    },
                ],
            }
        ],
    },
};

/// A.component.ts

export class AComponent {
  @Input() model;

  constructor() {
     // create your reactive forms here with data from model
     this.form = new FormGroup(...)
  }
}

Answer 2

我通过创建一个新的 AStoryComponent 解决了这个问题。

// a-story.component.ts

@Component({
    selector: 'a-component-story',
    template: `<a-component [model]="model"></a-component>`,
})
export class AStoryComponent implements OnInit {

    @Input() model!: any;

    constructor() {}

    ngOnInit() {
        // Converts the "formGroup" property I specified in a.stories.ts to the real formGroup object.
        convertStoryModelToRealModel(this.model);
    }

}


// a.stories.ts

import { Validators } from '@angular/forms';
import { Meta, moduleMetadata, Story } from '@storybook/angular';

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

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

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