Angular Reactive Form检查FormControl是否存在于Test中答案

【问题标题】：Angular Reactive Form check if FormControl is existing in TestAngular Reactive Form检查FormControl是否存在于Test中
【发布时间】：2018-02-06 08:51:58
【问题描述】：

我在 Angular 5 中有一个反应式表单，它正在工作。这种形式有 e.q.一个输入字段和一个复选框。

<div class="form-group" *ngIf="!myForm.controls.myCheckbox.value">
    <input class="form-control" formControlName="myField"
</div>

<div class="form-group">
    <input type="checkbox" formControlName="myCheckbox">
</div>

复选框用于处理输入字段的可见性：如果选中的输入字段不可见，反之亦然。

我正在使用 jasmine 编写测试，使用 TestBed 来配置 componentFixture。

我试图获取 formControl 并检查是否存在，例如使用以下语句，但它不起作用。

let myField= component.driverForm.controls['myField'];
let myCheckbox= component.driverForm.controls['myCheckbox'];
myCheckbox.setValue(true);

fixture.detectChanges();

expect(myField).toBeFalsy("myField not existing");

预期 FormControl( ... ) 是虚假的“myField 不存在”。

我现在的问题是，如何在 jasmine 测试中单击复选框时测试表单控件“myField”是否可见/不可见？

【问题讨论】：

标签： angular jasmine angular-reactive-forms

【解决方案1】：

好的，我找到了自己的解决方案。首先我需要通过以下方式获取元素：

const el = fixture.debugElement.nativeElement;
let myField= el.querySelector('input[formControlName=myField]');
expect(myField).toBeTruthy();

let myCheckboxControl= component.driverForm.controls['myCheckbox'];
expect(myCheckboxControl.value).toEqual(false);
//set checkbox state to true
myCheckboxControl.setValue(true);

fixture.detectChanges();

那我更新复选框后需要再次获取输入字段：

myField = el.querySelector('input[formControlName=myField]');
expect(myField).toBeNull("myField not existing");

【讨论】：