Angular 5中表单测试添加及formGroup绑定报错解决方法

嘿，这个问题我太熟了！你遇到的Can't bind to 'formGroup' since it isn't a known property of 'form'错误，本质是测试环境里的模块配置不全——Angular在测试组件时，只会加载你明确指定的模块，而formGroup属于响应式表单指令，默认不会被自动引入。

下面是具体的解决步骤，直接套用到你的组件测试文件（比如xxx.component.spec.ts）里就行：

1. 导入必要的表单模块
   在测试文件顶部，导入响应式表单核心模块（如果用到模板驱动表单也可以一并导入）：

   import { ReactiveFormsModule, FormsModule } from '@angular/forms';
   

2. 在测试模块中注册这些模块
   在TestBed.configureTestingModule的imports数组里添加刚才导入的模块，同时确保你的组件已经在declarations里声明：

   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [ YourComponent ], // 替换成你的组件类名
       imports: [ ReactiveFormsModule, FormsModule ], // 关键：添加表单模块
       // 如果你的组件依赖其他服务（比如自定义表单服务），记得在这里的providers数组里注册
       // providers: [ YourCustomFormService ]
     })
     .compileComponents();
   });
   

3. 验证测试是否正常运行
   现在重新执行测试，这个formGroup的错误应该就消失了。如果还有其他类似“未知属性/指令”的错误，大概率是其他依赖模块没在测试环境中导入——比如如果用了Angular Material的表单组件，还要导入MatFormFieldModule、MatInputModule等对应的模块到测试模块的imports里。

简单来说，测试环境是一个“干净的沙箱”，你需要把组件运行时依赖的所有模块、服务都手动配置进去，和你在应用的AppModule或特性模块里做的配置类似～

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