Deep copy of Angular Reactive Form?
This is how I would do it:
copyFormControl(control: AbstractControl) {
if (control instanceof FormControl) {
return new FormControl(control.value);
} else if (control instanceof FormGroup) {
const copy = new FormGroup({});
Object.keys(control.controls).forEach(key => {
copy.addControl(key, copyFormControl(control.controls[key]));
});
return copy;
} else if (control instanceof FormArray) {
const copy = new FormArray([]);
control.controls.forEach(control => {
copy.push(copyFormControl(control));
})
return copy;
}
}
I personally use lodash cloneDeep() function found here:
https://lodash.com/docs/#cloneDeep
I use it this way:
const newFormGroup: any = _.cloneDeep(myFormGroup);
And you if you want it strongly typed, you can add as FormGroup
as @Andre Elrico suggested in the comments:
const newFormGroup = _.cloneDeep(myFormGroup) as FormGroup;
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;
}