Question

我正在使用Angular v4.4.4。在组件中，在模板中单击按钮后，假定反应形式有效，将保存表单。像（伪代码）：

public onSave(): void {
    if (this.myForm.valid) {
        this._createFoo();
    }
}

private _createFoo(): void {
    this._fooService.createItem(this.foo).subscribe(result => {
        // stuff happens...
    });
}

在相关单元测试中，我需要强制表单有效，以便我可以确认正在调用服务。像这样：

it('should create Foo', () => {
    const spy = spyOn(_fooService, 'createItem').and.callThrough();
    component.foo = new Foo();
    fixture.detectChanges();
    const bookButton = fixture.debugElement.query(By.css('#bookButton'));
    expect(bookButton !== null).toBeTruthy('missing Book button');
    bookButton.triggerEventHandler('click', null);
    expect(spy).toHaveBeenCalled();
});

这将失败，因为myForm永远不会被设置为有效。

在这种特殊情况下，我不想给表单中的每个输入赋值。我只需要观察并查看服务订阅是否发生。如何强制表格有效？

Answer 1

为什么不清除验证器列表？

// If there are any async validators
//
this.myForm.clearAsyncValidators();
// If there are any normal validators
//
this.myForm.clearValidators();
// Doing the validation on all the controls to put them back to valid
//
this.formGroup.updateValueAndValidity();

这将确保您的表单没有验证器，因此有效。

Answer 2

如果有人仍在为此挣扎：

如@ {realappie答案所示，我们应清除所有同步/异步验证器。 但是在大多数情况下，验证器位于控件上，而不是表单本身。因此，只需循环所有控件即可对每个控件执行此操作。

从测试文件看起来应该像这样：

const controls = component.myForm.controls;

for (const control in controls) {
    // Clear sync validators - use clearAsyncValidators() for async
    // validators
    controls[control].clearValidators();
    // should update just the control and not everything
    controls[control].updateValueAndValidity({ onlySelf: true });
}
component.myForm.updateValueAndValidity();

Angular - 强制反应形式在单元测试中有效

2 个答案: