Angular2 - 重置时反应形式抛出错误
2017-07-25
1943
我有一个带有自定义验证器的反应式表单设置。我有一个方法应该重置表单,但我认为在发生这种情况时,它会干扰验证器并引发错误。
组件:
/**
* 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:无法读取 null 的属性“length”
。
除了我在现有表单上调用该方法之外,重置是否还有其他内容?
2个回答
重置不仅是重置。
formgroup.reset的签名},options:{唯一的?
您可以看到第一个参数是将要重置表单组的所需值,并且它具有
{}
的默认值,这意味着在您的情况下,表单值将为
{}
,而您的需求是所有子数组。在您的情况下重置表格的正确方法是:
867006029
Harry Ninh
2017-07-25
您应该将初始状态对象传递给 reset 方法,这样您的控件就不会被初始化为 null。您可以在 renderForm 方法中重用传递给 group 方法的对象。 有关更多信息,请参阅 https://angular.io/guide/reactive-forms#reset-the-form-flags 。
Kim Kern
2017-07-25