Angular Reactive Forms 重置值

Question

我有一个复杂的 FormGroup，其中包含多个 FormControls、FormGroups 和 FormArrys。

我需要将表单重置为其初始值。但是，可以从服务器检索初始值。这意味着我得到某种 JSON，然后将其解析到我的 FormGroup 中，我需要保存此状态才能将所有内容重置为之前的状态。

FormGroup.reset() 或 FormGroupDirective.resetForm() 只是重置控件的值，而不改变 FormArrays 的长度。

我有以下 FormGroup 结构

formGroup: FormGroup = this.fb.group({
    unitNames: this.fb.array([this.createName()], Validators.required),
    types: this.fb.array([], Validators.required),
    addresses: this.fb.array([]),
    requisites: this.fb.array([]),
    note: [null],
    mediaContent: this.fb.array([])
});

每个 FormArray 在 JSON 提取后填充有复杂的 FormGroups。

保存初始状态然后在表单重置时恢复它的最佳方法是什么？

---

现在我正在尝试这样做

resetForm() {
    this.formGroupDirective.resetForm();
    this.formGroup = this.fb.group({
        unitNames: this.fb.array([this.createName()], Validators.required),
        types: this.fb.array([], Validators.required),
        addresses: this.fb.array([]),
        requisites: this.fb.array([]),
        note: [null],
        mediaContent: this.fb.array([])
    });

    this.patchDeep(this.savedUnit);
    this.resetPopup.close();
}

patchDeep(unit) {
    if (unit.unitNames && unit.unitNames.length > 0) {
        unit.unitNames.forEach((unitName, i) => {
            this.names.setControl(i, this.createName(unitName));
        });
    }

    if (unit.unitAddresses && unit.unitAddresses.length > 0) {
        unit.unitAddresses.forEach((addressGroup, i) => {
            this.addresses.setControl(i, this.fs.createAddress(addressGroup));
        });
    }
}

但是，这种方法需要手动将 FormArray 重置为 0，这样就不会出现额外的值并且看起来不正确。

---

近似 JSON

{
    unitNames: [
        {
            id: 1,
            nameTypeId: 3,
            value: 'Unit 1'
        },
        {
            id: 2,
            nameTypeId: 1,
            value: 'Unit Alias'
        }
    ],
    types: [
        {
            unitTypeId: 3,
            unitCode: 3131,
            unitNote: 'sample text'
        }
    ],
    requisites: [
        {
            country: 'UK',
            city: 'London',
            build: 'B122/1',
            phones: [
                {
                    phoneType: 32,
                    value: '992-123-1'
                },
                {
                    phoneType: 1,
                    value: '123'
                }
            ]
        }
    ],
    note: 'Hello world'
}

Answer 1

我现在遇到了确切的问题。既然你差不多 3 年前问过这个问题，我真的很好奇你最终得到了什么解决方案。

对我来说，似乎有两种解决方案（都同样糟糕）：

1. 重新创建（重新绑定）根 formGroup - 这会导致您失去对原始 formGroup 的引用，但它也会破坏对 valueChanges 的所有订阅，在我的情况下，我还遇到了更改检测的问题，而不是运行和其他事情（例如，即使在我禁用了 root formGroup 之后，也启用了一些选择或复选框）。

2. 遍历每个 formArray 并使用 someFormArray.removeAt() 或使用 someFormArray.clear() 手动清理它 然后使用someFormArray.push() 再次添加元素。 - 这看起来是最常用的想法。当您的表单较小且不会增长时，这可能是可以接受的，您可以直接访问 someFormArray。但是当你有很大的复杂表单时，你可以尝试编写一些可能使用递归来查找 formArrays 的方法，但是编写适用于嵌套 formGroups 和 formArrays 的所有情况的通用方法可能会很痛苦。

---

2016 年，有人要求 form.reset() 也清理 formArray 长度，但 Angular 团队的某个人关闭了该问题，建议重新创建（重新绑定）根 formGroup。看： https://github.com/angular/angular/issues/10960

以下是堆栈上的类似问题，但答案总结了我提出的两个解决方案：

How do I clear the FormArray in Angular Reactive Forms

restore the modal original state in FormArray on "Cancel Change" button clicked in angular5

How to clear the FormArray values in angular reactive form?

FormArray length does not reset by form.reset()

How to reset formarray to one item in angular

FormArray in Angular Reactive Form not resetting on form submit