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中，我这样调用reset方法：

(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方法中group方法的对象。 有关更多信息，请参见https://angular.io/guide/reactive-forms#reset-the-form-flags 。