Angular 无指令，"exportAs"设置为"ngForm"与业力测试

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。请参阅文档。

此外，您正在定义一个lForm变量，但没有使用它。而且您将novalidate设置为空，因为Angular形式会为您做这件事。