如何在角度 6 中测试模板驱动的表单

Question

我有一个模板驱动的表单：

<form #form="ngForm" (ngSubmit)="onSubmit()">
<input class="form-control input-lg" id="venue_name" name="venue_name" type="text" #venue_name="ngModel"
[(ngModel)]="tournament.venue.venue_name" required>
<input id="address" name="address" placeholder="search for location" required #address="ngModel"
type="text" class="form-control input-lg" #search [(ngModel)]="tournament.venue.address">
</form>

在我的组件中，我有：

@ViewChild(NgForm) ngForm: NgForm;

在我的测试中，我有：

fixture = TestBed.createComponent(TournamentEditVenueComponent);
comp = fixture.componentInstance;
form = comp.ngForm.form;
console.log(form);

在这里，我可以在Chrome控制台中看到：

FormGroup {venue_name: FormControl, address: FormControl, details: FormControl, country_id: FormControl}

所以表格似乎是可以到达的

但是当我尝试达到它时

console.log(form.controls);

或

console.log(form.controls['venue_name']);

第一个是空的，第二个是未定义的。

为什么？我该怎么办？

Answer 1

不确定这样做的确切原因 - 需要更多地研究灯具的工作原理，但下面的代码对我有用。

对于解决方案，似乎在完成设置后不会调用fixture.detectChanges()，这是测试中设置数据绑定所必需的。更多信息： https://angular.io/guide/testing

一旦根据这个答案完成此操作 尝试在组件中单元测试基于模板的表单，表单没有控件 它解释说他们当时修复了它，也确保了夹具是稳定的 -

fixture.whenStable(( 返回一个承诺，该承诺在 JavaScript 引擎的任务队列变为空。

如果您尝试访问此处的表单控件，那么它将像下面的示例一样工作。

fixture = TestBed.createComponent(TournamentEditVenueComponent);
comp = fixture.componentInstance;
fixture.detectChanges();
fixture.whenStable().then( () => {
console.log(comp.ngForm.controls['venue_name'])
component.ngForm.controls['venue_name].setValue('test_venue');
})

希望这有帮助。