Angular 没有指令 "exportAs" 设置为 "ngForm" 与 Karma 测试

Question

我正在尝试使用 Karma 测试表单，但出现了以下错误：

'Failed: Template parse errors: There is no directive with "exportAs" set to "ngForm"'.

当我运行在 Karma 之外时，此表格工作正常。表单代码如下所示：

<div class="container" fxLayout="row" fxLayoutGap="10px">
    <form novalidate [formGroup]="loginForm" #lForm="ngForm" (ngSubmit)="onSubmit()">
      <mat-form-field class="full-width">
        <input matInput formControlName="userName" placeholder="User Name" type="text">
      </mat-form-field>
      <mat-form-field class="full-width">
        <input matInput formControlName="password" placeholder="Password" type="password">
      </mat-form-field>
      <button
        type="submit"
        mat-button
        class="primary-button"
      >
        Login
      </button>
    </form>
</div>

spec.ts 文件如下所示：

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FlexLayoutModule } from '@angular/flex-layout';
import { FormsModule } from '@angular/forms';

import { LoginComponent } from './login.component';

describe('LoginComponent', () => {
  let component: LoginComponent;
  let fixture: ComponentFixture<LoginComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        FormsModule,
        FlexLayoutModule
      ],
      declarations: [ LoginComponent ]
    })
    .compileComponents();
  }));

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

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

我能找到的关于这个错误的所有信息都说导入 FormsModule 会修复错误，但我已经这样做了，所以我不确定还能做什么。我正在使用 Angular 7 和 Karma 3.

Answer 1

您正在表单中使用 [formGroup]。

所以你正在创建一个反应形式。

因此您需要导入 ReactiveFormsModule，而不是 FormsModule。参见 the documentation。

此外，您正在定义一个 lForm 变量，但您没有使用它。而你设置 novalidate 是徒劳的，因为 Angular 表格会为你做这些。

Angular 没有指令 "exportAs" 设置为 "ngForm" 与 Karma 测试

Angular no directive with "exportAs" set to "ngForm" with Karma testing

karma-runner

angular