测试 angular 个模板驱动的表单

Question

我用的是angular 5、表格的.controls属性一直是空的。不确定为什么在测试期间 angular 不通过读取模板文件创建表单控件。

模板文件

<form 
  #myForm="ngForm"
  novalidate>
  <input 
    #myCtrl
    required
    type="input" 
    name="myCtrl" 
    id="myCtrl"
    [(ngModel)]="value">
</form>

组件文件

@ViewChild('myForm') myForm: NgForm;

在我的测试中，当我 console.log 以下内容时，我得到 {}

fixture.debugElement.componentInstance.myForm.controls

表单也有错误：null 和状态 VALID 尽管表单应该包含无效的 FormControl。当表单配置为 ViewChild 而不是 FormBuilder 时，是否可以对表单进行单元测试？有没有办法用我的 ViewChild 设置来做到这一点？

或者我们是否必须通过使用 FormGroup 再次创建控件并将其分配给

来模拟表单

componentInstance.myForm.controls?

Answer 1

我认为您需要在检查控件之前放置 fixture.detectChanges()。

Answer 2

我在 beforeEach() 中缺少异步，尽管我在 async 中有 testbed 配置。

也用@ViewChild('nameOfForm') sampleForm: NgForm;

当测试运行规范时，模板中指定的表单控件会被初始化并在 component.sampleForm

中可用