我正在尝试构建一个函数来生成给定 FormGroup
的副本。我开始于:
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
,那将不起作用。 如果它是递归的,它可能会工作,但我无法很好地处理它。
我也尝试用
来解决它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
...
我也试过:
function copyForm(form: FormGroup): FormGroup {
const copy = new FormGroup(Object.assign({}, form.value));
return copy;
}
但这给了我错误:
ERROR TypeError: control.setParent is not a function
我很难过。
最佳答案
这是我想出的深度复制功能,它还保留了每个 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;
}
关于angular - Angular Reactive Form 的深拷贝?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48308414/