能否通过创建Provider Mock Angular FormGroup解决Storybook表单报错？

解决方案 #

Angular的formControlName指令依赖上层注入的ControlContainer实例，默认由模板中带[formGroup]绑定的指令提供，你可以直接在Storybook的providers中手动注入该实例，无需额外编写外层包裹模板。

具体实现 #

首先补充导入缺失的依赖：

import { FormGroupDirective, ControlContainer, FormControl } from '@angular/forms';

然后在providers数组中填入以下内容：

providers: [
  {
    provide: ControlContainer,
    useFactory: () => {
      // 构造和你业务逻辑匹配的FormGroup实例
      const targetFormGroup = new FormGroup({
        example: new FormControl('') // 可自定义初始值、校验规则
      });
      // 实例化FormGroupDirective并绑定FormGroup
      const groupDirective = new FormGroupDirective([], []);
      groupDirective.form = targetFormGroup;
      return groupDirective;
    }
  }
]

扩展说明 #

如果需要适配多Story场景，可结合Storybook的args动态传递表单初始值、校验规则，不需要重复编写provider逻辑。该方案和模板中写<div [formGroup]>的底层逻辑完全一致，兼容组件内所有表单相关的调用（比如valueChanges订阅、状态判断等）。

内容的提问来源于stack exchange，提问作者N33D