故事书中的角度形式组:将圆形结构转换为JSON [英] Angular FormGroup in Storybook: Converting circular structure to JSON
本文介绍了故事书中的角度形式组:将圆形结构转换为JSON的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在处理棱角和故事书。我的模型中有一个FormGroup和Form数组,但它们不使用情节提要。
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",
},
],
}
],
},
};
我在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>)
如果";formGroup";为空,则它起作用。->;
"formGroup": new FormGroup({
}),
但是,如果";formGroup";不为空,它将不起作用。->;
"formGroup": new FormGroup({
asd: new FormControl(''),
}),
我如何修复此问题?
推荐答案
我通过创建新的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,
};
这篇关于故事书中的角度形式组:将圆形结构转换为JSON的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文