问题描述
我正在尝试构建一个函数,该函数将生成给定FormGroup
的副本.我从开始:
I'm trying to build a function that will produce a copy of a given FormGroup
. I started with:
function copyForm(form: FormGroup): FormGroup {
const copy = new FormGroup({});
for (let key of Object.keys(form.value)) {
const control = form.controls[key];
/* Copy the data from the control into a new control */
const copyControl = new FormControl({[key]: control.value});
copy.addControl(key, copyControl);
}
但是如果有FormArray
或FormGroup
,那将不起作用. 如果它是递归的,则可能会起作用,但我无法很好地解决这个问题.
But that doesn't work if there is a FormArray
or FormGroup
. This one might work if it were recursive, but I couldn't get a good handle on it.
我也尝试用
function copyForm(form: FormGroup): FormGroup {
const copy = new FormGroup({});
for (let key of Object.keys(form.value)) {
const control = form.controls[key];
const copyControl = new FormControl({...control.value});
copy.addControl(key, copyControl);
}
return copy;
}
但这不适用于双重嵌套FormGroups
,任何FormArrays
或常规FormControls
...
But that didn't work for double-nested FormGroups
, any FormArrays
or regular FormControls
...
我也尝试过:
function copyForm(form: FormGroup): FormGroup {
const copy = new FormGroup(Object.assign({}, form.value));
return copy;
}
但这给了我错误:
ERROR TypeError: control.setParent is not a function
我很困惑.
推荐答案
这是我想到的深层复制功能,它还保留了相关的验证器/异步验证器功能以及每个AbstractControl的禁用状态.
This is the deep copy function I came up with which also retains the associated validator / async validator functions and disabled status of each AbstractControl.
/**
* Deep clones the given AbstractControl, preserving values, validators, async validators, and disabled status.
* @param control AbstractControl
* @returns AbstractControl
*/
export function cloneAbstractControl<T extends AbstractControl>(control: T): T {
let newControl: T;
if (control instanceof FormGroup) {
const formGroup = new FormGroup({}, control.validator, control.asyncValidator);
const controls = control.controls;
Object.keys(controls).forEach(key => {
formGroup.addControl(key, cloneAbstractControl(controls[key]));
})
newControl = formGroup as any;
}
else if (control instanceof FormArray) {
const formArray = new FormArray([], control.validator, control.asyncValidator);
control.controls.forEach(formControl => formArray.push(cloneAbstractControl(formControl)))
newControl = formArray as any;
}
else if (control instanceof FormControl) {
newControl = new FormControl(control.value, control.validator, control.asyncValidator) as any;
}
else {
throw new Error('Error: unexpected control value');
}
if (control.disabled) newControl.disable({emitEvent: false});
return newControl;
}
这篇关于角反应形式的深层副本?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!