角反应形式的深层副本? [英] Deep copy of Angular Reactive Form?

问题描述

我正在尝试构建一个函数，该函数将生成给定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;
}

这篇关于角反应形式的深层副本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！