我有一个模板驱动的形式:
<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']);
第一个是空的,第二个是未定义的.
为什么?我应该怎么做?
解决方法
不确定这个的确切原因 – 需要研究一下夹具的工作原理,但下面的代码对我有用.
对于解决方案,一旦完成设置,您似乎不会调用fixture.detectChanges(),这在测试中需要设置数据绑定.更多信息:https://angular.io/guide/testing
一旦根据这个答案Trying to unit test template-based form in a component,form has no controls完成这个,它解释说他们修复它然后也确保夹具稳定 –
fixture.whenStable() returns a promise that resolves when the
JavaScript engine’s task queue becomes empty.
如果您尝试访问此处的表单控件,那么它将在下面的示例中工作.
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'); })
希望这可以帮助.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。