typescript Angular Reactive Form 的深层副本？

Deep copy of Angular Reactive Form?

提问by vince

I'm trying to build a function that will produce a copy of a given FormGroup. I started with:

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

But that doesn't work if there is a FormArrayor FormGroup. This one might work if it were recursive, but I couldn't get a good handle on it.

但是，如果有一个FormArrayor ，那将不起作用FormGroup。如果它是递归的，这个可能会起作用，但我无法很好地处理它。

I also attempted to solve it with

我也试图解决它

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;

}

}

But that didn't work for double-nested FormGroups, any FormArraysor regular FormControls...

但这不适用于 double-nested FormGroups， anyFormArrays或常规FormControls...

I also tried:

我也试过：

function copyForm(form: FormGroup): FormGroup {
  const copy = new FormGroup(Object.assign({}, form.value));
  return copy;
}

But that gives me the error:

但这给了我错误：

ERROR TypeError: control.setParent is not a function

I'm stumped.

我难住了。

回答by John

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.

这是我想出的深度复制功能，它还保留了关联的验证器/异步验证器功能和每个 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;
}

回答by displayName

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.getRawValue()).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'm using getRawValue()instead of value, because valuewon't include controls which are disabled.

我使用的是getRawValue()代替value，因为value不包括禁用的控件。

回答by Nadhir Falta

I personally use lodash cloneDeep() function found here:

我个人使用这里找到的 lodash cloneDeep() 函数：

https://lodash.com/docs/#cloneDeep

https://lodash.com/docs/#cloneDeep

I use it this way:

我这样使用它：

const newFormGroup: any = _.cloneDeep(myFormGroup);

const newFormGroup: any = _.cloneDeep(myFormGroup);

And you if you want it strongly typed, you can add as FormGroupas @Andre Elrico suggested in the comments:

如果你想要它的强类型，你可以as FormGroup在评论中添加@Andre Elrico 的建议：

const newFormGroup = _.cloneDeep(myFormGroup) as FormGroup;

const newFormGroup = _.cloneDeep(myFormGroup) as FormGroup;

回答by Richard Dunn

If you have simple FormGroups that contain only FormControls(i.e. not FormGroups or FormArrays), and you know their structure in advance, then this is a simple solution:

如果您有只包含 FormControls 的简单 FormGroups （即不是 FormGroups 或 FormArrays），并且您事先知道它们的结构，那么这是一个简单的解决方案：

Note: by using initaliseFormGroupfor initalising the original FormGroup, you will match the validators for each control.

注意：通过initaliseFormGroup用于初始化原始 FormGroup，您将为每个控件匹配验证器。

initaliseFormGroup(){
    return new FormGroup({
        x : new FormControl('', Validators.required),
        y : new FormControl('', Validators.minLength(10))
    });
}

cloneFormGroup(oldForm: FormGroup){
    let newForm = this.initaliseFormGroup()
    newForm.patchValue(oldForm.value);
    return newForm;
}

If you have more complex forms (with child FormGroups), or want to clone them dynamically without knowing their structure in advance, then the other answers will better suited.

如果您有更复杂的表单（带有子 FormGroups），或者想要在事先不知道它们的结构的情况下动态克隆它们，那么其他答案将更适合。