Question

我正在尝试使用Karma测试表单，但是发生以下错误：

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

当我在业力之外运行此表单时，它可以正常工作。表单的代码如下：

<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表单可以帮您实现这一点。

通过Karma测试将“ exportAs”设置为“ ngForm”的Angular no指令

1 个答案: