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

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.

[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]

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
             ]
         })
     ]
};