New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Getting maximum call stack size exceeded for Storybook with Angular with FormGroup #13238
Comments
@altbdoor I am facing the same issue. As of now, I replaced FormBuilder by a Fake class, that works with FormControls from Angular.
Then in your story you can call it like this:
I added some of the methods of the real FormGroup group and if you pass a FormControl you still get all the methods from FormControl. |
Possible dupe to #13242 |
I haven't looked into why you are getting If the I have been waiting on custom controls(#11486) to come up with a way to handle this case, but only common things like Angular's form controls would probably be considered as possible built-in controls, so if someone has a clean way of doing this without waiting on Storybook to support custom controls that would be nice. The following is a mess, but I will briefly describe the solution I used in my POC // This is was not meant to be thorough, so it is missing multiple cases and could be more organized.
function storyFormControl(id: string, value?: any): FormControl {
const doc = document as any
// NOTE: This would probably be a memory leak, since I never clean up the globally stored objects.
if (!doc._mbStoryTmp) { doc._mbStoryTmp = {} }
if (!doc._mbStoryTmp[id]) {
doc._mbStoryTmp[id] = new FormControl(value?.value)
}
const control = doc._mbStoryTmp[id] as FormControl
if (!!control && !!value) {
if (control.value !== value.value) {
control.setValue(value.value)
}
if (control.disabled !== value.disabled) {
if (control.disabled) {
control.enable()
} else {
control.disable()
}
}
if (control.touched !== value.touched) {
if (control.touched) {
control.markAsUntouched()
} else {
control.markAsTouched()
}
}
if (control.dirty !== value.dirty) {
if (control.dirty) {
control.markAsPristine()
} else {
control.markAsDirty()
}
}
}
return control
}
export const Example = (args) => {
return {
props: {
...args,
exFormControl: storyFormControl('Example-1', args?.exFormControl)
},
template: `
<div class="d-flex flex-column">
<input type="text" [formControl]="exFormControl">
<div>
Disabled: {{ exFormControl.disabled }}
</div>
<div>
Touched: {{ exFormControl.touched }}
</div>
<div>
Dirty: {{ exFormControl.dirty }}
</div>
</div>
`
}
}
Example.argTypes = {
exFormControl: {
// NOTE: 'formControl' is not an implemented control. I had partially implemented one in a POC.
control: { type: 'formControl' }
}
} |
Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks! |
@vincentpalita I tried your code :
but it did not have the 'group' available from the class file. |
Stoybook is not much use to Angular developers if it will not work with FormGroups, FormArrays & FormControls. |
This issue should be solvable using mapped args. I am closing this for now because I cannot reproduce the problem. Please feel free to reopen it with a reproduction for Storybook 7 (https://storybook.new). |
Describe the bug
Getting
Maximum call stack size exceeded
for Storybook with Angular, when passing in aFormGroup
intoTemplate.args
To Reproduce
Steps to reproduce the behavior:
npm run storybook
Maximum call stack size exceeded
Expected behavior
Should not get an error, and Storybook gets rendered normally
Code snippets
Relevant code is in
0-child-component.stories.ts
in the repo, but the gist of it is:System
Additional context
The text was updated successfully, but these errors were encountered: