Angular: ngModel/ngModelChange don't work in Storybook 6.2+

[vetrov]

What's the problem?
There was a way to define inputs for Angular components implementing ControlValueAccessor interface (reactive form controls) by using ngModel and ngModelChange as props in story. After upgrading to Storybook 6.2 these props seems do not work anymore.

• new renderer: nothing happens, component.writeValue is not called
• old renderer (angularLegacyRendering: true): see this error in console: TypeError: instance.writeValue is not a function, value is not passed to the component

Example:

Story for this use case exists in the demo, but does not work as well: https://next--storybookjs.netlify.app/angular-cli/?path=/story/basics-angular-forms-controlvalueaccessor--simple-input (currently works on Storybook 6.3.0-alpha.9)

Code for this story: https://github.com/storybookjs/storybook/blob/v6.3.0-alpha.9/examples/angular-cli/src/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts

Is there documentation on this?
ngModel and ngModelChange are not mentioned in documentation, so it's more like undocumented (but implemented) feature.

Here is more details on how it is implemented in old renderer: https://github.com/storybookjs/storybook/blob/v6.2.8/app/angular/src/client/preview/angular/components/app.component.ts#L110

Additional context
Would be good to understand if it's a bug or there's now another way to create stories for Angular form controls.

[daan93]

I can confirm this issue on storybook 11.2.9. In my console the following error shows up.

[vetrov]

I can confirm this issue on storybook 11.2.9. In my console the following error shows up.

@daan93 Looks like you need to explicitly import FormsModule into your story. Do you have something like this in your code?

export default {
     title: 'Components/My Component,
     component: MyComponent,
     decorators: [
         moduleMetadata({
             imports: [
                 FormsModule
             ]
         })
     ]
};

[daan93]

@vetrov I did not have the decorator in my stories, thanks for pointing that out. When I add it, including the required imports, the story will render and the controls will work. Previously I did not need the decorator, I guess I will update my stories now. Would be nice to have some documentation on this.

Required imports:

import { FormsModule } from '@angular/forms';
import { moduleMetadata } from '@storybook/angular';

[shilman]

@ThibaudAV any idea what's changed? ☝️

[ThibaudAV]

🤔 arf, Bad behaviors of previous version which gives bad habits, I think 😁. The FormsModule was always loaded by storybook probably for some obscure reason.

As the new renderer behaves like a real angular application in this case if. So there are the same errors as if you have an angular application without this import
FormsModule is an implementation detail. Not all stories need it, so it comes back to each story needing to "add it"
I also think, the peerDependencies on @angular/forms should be deleted in apps/angular (with sb v7 ?)

the error message of angular is ~clear. But maybe a precision can be brought in the MIGRATION.md or the answer to this issue is enough 🤷‍♂️

[vetrov]

@ThibaudAV how about the original question, have you noticed this issue with Storybook 6.2+?

[ThibaudAV]

@vetrov Could you provide an example where it does not work from this story 🙏 ?

The new renderer generates a "template" so if the component is placed in the same condition (import, dep,...) as an angular application. there should be no difference 🤔
So all that is ngModel and ngModelChange and life cycle of a component is done by angular and not by storybook

[vetrov]

@ThibaudAV, sure, here is how to reproduce what I'm doing:

Open Storybook example for Angular form control: open story. It is based on v6.3.0-alpha.16 as I can see from About.

As I understood this is a source code for the example above: source code

Looking on source code I expect, that:

• Input is prefilled with "Type anything" when open story, but it's empty
• When I'm typing something in the input, action is logged in Actions tab, but it is not

Same behaviour I observe when running the same example story for Storybook 6.2.9

Here is the same story for Storybook 6.1.21 and it works as expected: https://storybookjs.netlify.app/angular-cli/?path=/story/custom-ngmodel--custom-control-value-accessor

[ekuwang]

I find that if you set a props in story, let's say 'A'. Story will only set it on the Component when the Component does have an @input var named A. If not, story won't set 'A' prop.

So I guess this issue is caused because custom form control component actually doesn't need us to set ngModel & ngModelChange as @input or @output vars. And story doesn't set ngModel prop when render the Component. And angular form module won't activate form control system on the Component. And writeValue method never be called.

[softdays]

Reproduced using SB 6.5.16. Any news?

[shilman]

Please try upgrading to the latest prerelease. Is it still a problem?

Migration guide: https://storybook.js.org/migration-guides/7.0

[simon-fryer1]

Hi, any update on this? I've upgraded to version 7 of Storybook and it's still an issue. It appears after looking at the new code that the ngModel and ngChangeModel values are no longer set from the properties values like they were in version 6.1.

[Kondziowsky]

Hello, same problem here, any updates how to fix this updating ngModel? I feel like storybook 7.4 + angular 15 is a little messy in few points.