开发者问题收集

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