angular - Angular2 - Biểu mẫu phản ứng ném lỗi khi đặt lại

Tôi có một thiết lập form phản ứng với một trình xác thực tùy chỉnh. Tôi có một phương thức được cho là sẽ đặt lại form nhưng tôi nghĩ khi điều này xảy ra, nó làm rối trình xác thực và gây ra lỗi.

Thành phần:

/**
 * 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();
}

Trong HTML của tôi, tôi đang gọi phương thức reset như sau:

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

Khi tôi đặt lại biểu mẫu của mình, tôi nhận được lỗi ERROR TypeError: Cannot read property 'length' of null.

Liệu việc đặt lại có nhiều hơn những gì tôi đang giả định chỉ bằng cách gọi phương thức đó trên biểu mẫu hiện có không?

Câu trả lời #1

Còn nhiều điều hơn thế về việc thiết lập lại.

Chữ ký của FormGroup.reset là

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

Bạn có thể thấy rằng tham số đầu tiên là giá trị mong muốn của nhóm biểu mẫu mà biểu mẫu sẽ đặt lại, và nó có giá trị mặc định là {}, có nghĩa là trong trường hợp của bạn, giá trị biểu mẫu sẽ là {}, trong khi nhu cầu của bạn là tất cả các mảng con. Cách đúng để đặt lại biểu mẫu trong trường hợp của bạn là:

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

Câu trả lời #2

Bạn nên truyền một đối tượng trạng thái ban đầu vào phương thức reset, để các điều khiển của bạn không được khởi tạo với giá trị null. Bạn có thể tái sử dụng đối tượng mà bạn truyền vào phương thức group trong phương thức renderForm của mình. Xem https://angular.io/guide/reactive-forms#reset-the-form-flags để biết thêm thông tin.