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([])
});

JSON提取后，每个FormArray都填充有复杂的FormGroup。

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

现在我正试图那样做

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'
}

Angular反应形式重置值

0 个答案: