Angular Reactive Form 的深拷贝？

Posted 2023-03-13

【中文标题】Angular Reactive Form 的深拷贝？

【英文标题】：Deep copy of Angular Reactive Form?

【发布时间】：2018-06-26 18:21:59

【问题描述】：

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

我被难住了。

【问题讨论】：

递归很有趣，但更实用的方法是使用表单构建器重新创建表单，然后使用第一个表单的值来重置另一个？

好问题。谢谢

【参考方案1】：

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

【讨论】：

不错的答案。真的很有帮助。

【参考方案2】：

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

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

我是这样用的：

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

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

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

【讨论】：

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

当其中一个实例订阅valueChanges 时，请注意副作用。深度克隆将在所有实例中触发订阅

【参考方案3】：

我会这样做：

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;
    

【讨论】：

遗憾的是，这并不能复制验证器

【参考方案4】：

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

注意：通过使用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;

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