web-dev-qa-db-ja.com

Angular Reactive Form？

指定された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

私は困惑しています。

angulartypescriptrecursioncloneangular-reactive-forms
3
vince

これは私が思いついたディープコピー関数であり、関連するバリデーター/非同期バリデーター関数と各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;
}
7
John

これは私がそれをする方法です：

_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;
    }
}
_

valueには無効になっているコントロールが含まれないため、valueの代わりにgetRawValue()を使用しています。

3
displayName

私は個人的にここにあるlodashcloneDeep（）関数を使用しています：

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

私はそれをこのように使用します：

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

3
Nadhir Falta

FormControlsのみを含む（つまり、FormGroupsまたはFormArraysを含まない）の単純なFormGroupsの場合：

cloneForm(formGroup: FormGroup){
    let x = new FormGroup({});
    x.patchValue(formGroup.value);
    return x;
}
0
Richard Dunn