Angular响应式表单如何检查测试中是否存在FormControl。

Question

我在Angular 5中有一个响应式表单，目前正常工作。这个表单包含一个输入框和一个复选框等元素。

<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>

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

我正在使用TestBed配置componentFixture编写Jasmine测试。

我尝试获取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"是否可见/不可见？

- mrkernelpanic

Answer 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");

- mrkernelpanic