1

我有一个自定义输入组件并想创建故事（使用故事书）

输入组件.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;
    .... 
}

输入.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'
    }
  }
};

当我尝试运行时storybook，它编译成功，但在控制台中，出现以下错误：NullInjectorError: No provider for NgControl!

我已经导入FormsModule，ReactiveFormsModule但Input.story.ts仍然有同样的错误，我做错了什么？或失踪？

4

0 回答 0