Angular2 - 重置时的反应性表单抛出错误

Question

我有一个带有自定义验证器的反应式表单设置。我有一个应该重置表单的方法，但我认为发生这种情况时，它会弄乱验证器并抛出错误。

元件：

/**
* Render the form in the UI to allow
*
* @memberof FilterSearchComponent
*/
renderForm() {
this.importForm = this.fb.group({
area: [[]],
silo: [[]],
department: [[]],
location: [[]],
segment: [[]],
role: [[]]
},
{
validator: (formGroup: FormGroup) => {
return this.validateFilter(formGroup);
}
});
}
/**
* Checks to see that at least one of the filter
* options have been filled out prior to searching
* for employees.
*
* @param formGroup
*/
validateFilter(formgroup: FormGroup) {
if (formgroup.controls["area"].value.length ||
formgroup.controls["silo"].value.length ||
formgroup.controls["department"].value.length ||
formgroup.controls["location"].value.length ||
formgroup.controls["segment"].value.length ||
formgroup.controls["role"].value.length
) {
return null;
} else {
return { noFilterOptions: true };
}
}
/**
* On the resetting of the filter search,
* clear our fields that were filled out.
*
* @param {any} data
* @memberof FilterSearchComponent
*/
onReset(data) {
this.importForm.reset();
}

在我的 HTML 中，我像这样调用重置方法：

(click)="onReset(importForm.value)"

重置表单时，我收到ERROR TypeError: Cannot read property 'length' of null的错误。

重置是否比我在现有表单上调用该方法所假设的更多？

Answer 1

重置还有更多。

FormGroup.reset的签名是

reset(value: any = {}, options: {onlySelf?: boolean, emitEvent?: boolean} = {}).

您可以看到第一个参数是表单将重置为的表单组的所需值，它的默认值为{}，这意味着在您的情况下，表单值将被{}，而您需要的是所有子数组。在您的情况下，重置表单的正确方法是：

this.importForm.reset({
area: [],
silo: [],
department: [],
location: [],
segment: [],
role: []
});

Answer 2

应将初始状态对象传递给 reset 方法，以便控件不会使用 null 初始化。您可以在 renderForm 方法中重用传递给组方法的对象。 有关详细信息，请参阅 https://angular.io/guide/reactive-forms#reset-the-form-flags。