How to use control-value-accessor in storyBook?

0
votes

I have a custom input component and want to create story (using storybook)

input.component.ts

@Component({
  selector: 'app-input',
  templateUrl: './input.component.html',
  styleUrls: ['./input.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => InputComponent),
      multi: true,
    },
  ],
})
export class InputComponent implements ControlValueAccessor
{
    @Input() config: any;
    .... 
}

Input.story.ts

import { CommonModule } from '@angular/common';
import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { Story, Meta } from '@storybook/angular/types-6-0';
import { InputComponent } from 'projects/sharemac-library/input/src/components/input/input.component';
import { moduleMetadata } from '@storybook/angular';
import { InputModule } from 'projects/sharemac-library/input/src/input.module';

export default {
  title: 'Example/Input',
  component: InputComponent,
  decorators: [
    moduleMetadata({
      imports: [FormsModule, CommonModule, ReactiveFormsModule],
      declarations: [InputComponent]
    })
  ],
} as Meta;

const Template: Story<InputComponent> = (args: InputComponent) => ({
  props: args
});

export const Primary = Template.bind({});
Primary.args = {
  config: {
    type: 'text',
    styleType: 'bordered',
    size: 'md',
    clearable: true,
    label: 'First name',
    placeHolder: 'E.G. Jon Doe',
    suffix: '%',
    prefix: '%',
    errorMessages: {
      required: 'Field is required',
      minlength: 'Min length error',
      maxlength: 'Max length error'
    }
  }
};

When I am trying to run storybook, it compiles successfully but in the console, I have the following error: NullInjectorError: No provider for NgControl!

I have imported FormsModule and ReactiveFormsModule in Input.story.ts but still have the same error, what am I doing wrong? or missing?

angularstorybookangular-storybook