Angular 7 测试：“无法绑定到 formGroup，因为它不是表单的已知属性”答案

【问题标题】：Angular 7 testing: "Can't bind to formGroup since it isn't a known property of form"Angular 7 测试：“无法绑定到 formGroup，因为它不是表单的已知属性”
【发布时间】：2019-07-09 20:38:16
【问题描述】：

控制台记录错误：

2019 年 15 月 2 日 14:50:24.868:INFO [Chrome 72.0.3626 (Windows 10.0.0)]：连接在套接字 BiEioS9fHwq-QLg3AAAA 上，ID 为 27946068 Chrome 72.0.3626 (Windows 10.0.0) LoginComponent 应该创建 FAILED 无法绑定到“formGroup”，因为它不是“form”的已知属性。 ("
        <div class="row">
（等）

我正在使用命令ng test 运行它。我的规格文件：

describe('LoginComponent', () => {

    let component: LoginComponent;
    let fixture: ComponentFixture<LoginComponent>;

    const fakeActivatedRoute = {
        snapshot: { data: {} }
    } as ActivatedRoute;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [
                LoginComponent
            ],
            imports: [
                RouterTestingModule,
                HttpClientModule,
                CommonModule,
                BrowserModule,
                BrowserAnimationsModule,
                ReactiveFormsModule,
                MessageModule,
                MatFormFieldModule,
                MatInputModule,
                MatButtonModule,
                MatCheckboxModule,
                MatProgressSpinnerModule,
                MatRadioModule,
                MatSliderModule,
                NgbModule
            ],
            providers: [
                {
                    provide: ActivatedRoute,
                    useValue: fakeActivatedRoute
                }
            ]
        })
            .compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(LoginComponent);
        component = fixture.debugElement.componentInstance;
        fixture.detectChanges();
    });

    it('should create', () => {
        expect(component).toBeTruthy();
    });

});

还有LoginModule 文件：

@NgModule({
  declarations: [LoginComponent],
  imports: [
    CommonModule,
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule,
    MatCheckboxModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatSliderModule,
    MessageModule,
    NgbModule.forRoot()
  ],
  providers: [],
  bootstrap: [
    LoginComponent,
    MessageComponent
  ]
})
export class LoginModule {}

缺少什么？

【问题讨论】：

你能分享你登录组件中的ts和html吗？

标签： angular unit-testing karma-jasmine

【解决方案1】：

这取决于您在项目中使用的表单类型。 Angular 提供了模板驱动的表单和响应式表单。如果您使用的是 Reactive 表单，则需要在 componentName.spec.ts 文件中将 ReactiveFormsModule 导入为

import { ReactiveFormsModule } from '@angular/forms';
beforeEach(async(() => {
TestBed.configureTestingModule({
  declarations: [ ContactUsFormComponent ],
  imports: [ReactiveFormsModule]
})
.compileComponents();}));

否则，如果您使用的是模板驱动的表单，则需要导入 FormsModule。

【讨论】：

这正是我所需要的，我遇到了同样的问题，这个导入解决了它。

【解决方案2】：

类似于Angular2 : Can't bind to 'formGroup' since it isn't a known property of 'form'

我认为您缺少在 configureTestingModule 中导入 FormsModule

【讨论】：

【解决方案3】：

我认为是

FormsModule

和

.forRoot()

在测试导入的 NgbModule 中。

【讨论】：