Angular 7 测试:“无法绑定到 formGroup，因为它不是表单的已知属性" [英] Angular 7 testing: "Can't bind to formGroup since it isn't a known property of form"

问题描述

控制台记录错误:

<块引用>

15 02 2019 14:50:24.868:INFO [Chrome 72.0.3626 (Windows 10.0.0)]:连接到套接字 BiEioS9fHwq-QLg3AAAA，ID 为 27946068 Chrome72.0.3626 (Windows 10.0.0) LoginComponent 应该创建 FAILED无法绑定到formGroup"，因为它不是form"的已知属性.("

(等)

我正在使用命令 ng test 运行它.我的规范文件:

describe('LoginComponent', () => {让组件:LoginComponent;让夹具:ComponentFixture;const fakeActivatedRoute = {快照:{ 数据:{}}作为 ActivatedRoute;beforeEach(async(() => {TestBed.configureTestingModule({声明: [登录组件],进口:[路由器测试模块，HttpClient 模块，通用模块，浏览器模块，浏览器动画模块，反应形式模块，消息模块，MatFormField 模块，垫输入模块，垫按钮模块，MatCheckbox模块，MatProgressSpinnerModule，MatRadio模块，垫滑块模块，Ngb 模块],供应商: [{提供:ActivatedRoute，useValue:fakeActivatedRoute}]}).compileComponents();}));beforeEach(() => {夹具 = TestBed.createComponent(LoginComponent);组件 = fixture.debugElement.componentInstance;夹具.detectChanges();});it('应该创建', () => {期望(组件).toBeTruthy();});});

和 LoginModule 文件:

@NgModule({声明:[登录组件]，进口:[通用模块，浏览器模块，浏览器动画模块，表单模块，反应形式模块，MatFormField 模块，垫输入模块，垫按钮模块，MatCheckbox模块，MatProgressSpinnerModule，MatRadio模块，垫滑块模块，消息模块，NgbModule.forRoot()],提供者:[]，引导程序:[登录组件，消息组件]})导出类 LoginModule {}

缺少什么?

解决方案

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

import { ReactiveFormsModule } from '@angular/forms';beforeEach(async(() => {TestBed.configureTestingModule({声明:[ ContactUsFormComponent ]，进口:[ReactiveFormsModule]}).compileComponents();}));

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

The console logs error:

15 02 2019 14:50:24.868:INFO [Chrome 72.0.3626 (Windows 10.0.0)]: Connected on socket BiEioS9fHwq-QLg3AAAA with id 27946068 Chrome 72.0.3626 (Windows 10.0.0) LoginComponent should create FAILED Can't bind to 'formGroup' since it isn't a known property of 'form'. ("

        <div class="row">

(etc)

I'm running it using command ng test. My spec file:

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();
    });

});

And the LoginModule file:

@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 {}

What's missing?

解决方案

It depends on which type of form you are using in your project. Angular provides Template-driven forms and Reactive forms. If you are using Reactive forms then, You need to import ReactiveFormsModule in your componentName.spec.ts file as

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

Otherwise, if you are using Template driven forms then, you need to import FormsModule.

这篇关于Angular 7 测试:“无法绑定到 formGroup，因为它不是表单的已知属性"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！