2

我正在使用角度和故事书。我的模型中有一个 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(''),
        }),

我怎样才能解决这个问题？

4

2 回答 2

0

问题在于args您提供给 Storybook 的每个人，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(...)
  }
}
于 2021-06-06T08:59:28.470 回答
0

我通过创建一个新的 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,
};
于 2021-06-08T23:07:48.357 回答