javascript - 当选中复选框时，如何将表单控件的所有值传递到另一个表单？

Question

我得到了表单#1:输入并选择。并在表单 #2 中使用相同的字段和复选框。当我单击复选框时，如何将表单 #1 的值传递到表单 #2？

HTML 代码:

<mat-form-field>
  <input matInput placeholder="Nombre" formControlName="names" required>
  <mat-error *ngIf= "f?.names?.errors?.required"> 
    Name field empty or not valid, please check 
  </mat-error>
</mat-form-field>

<mat-form-field>
  <mat-label>Provincia </mat-label>
  <mat-select formControlName="province" required>
    <mat-option *ngFor="let p of provincies" [value]=p?.locationCode>{{p.locationName}}</mat-option>
  </mat-select>
</mat-form-field>

表单 #2 上的复选框:

<mat-checkbox>Same info?</mat-checkbox>

Answer 1

如果您想一般性地执行此操作，而不关心表单是否相同或可能有多少个控件，或者是否存在嵌套表单组或表单数组，则可以根据通用控件名称复制值并使用递归:

HTML

<form [formGroup]="form1">...</form>

<form [formGroup]="form2">
  <mat-checkbox (change)="$event.checked ? copyValues(form1, form2) : {}">Copy</mat-checkbox>
  ...
</form>

TS

form1: FormGroup;
form2: FormGroup;
...
copyValues(src: FormGroup, dest: FormGroup) {
  Object.keys(src.controls).forEach((key: string) => {
    const destControl = dest.get(key);
    if (destControl) {
      if (destControl instanceof FormGroup || destControl instanceof FormArray) {
        this.copyValues(src.get(key), destControl);
      } else {
        destControl.setValue(src.get(key).value);
      }
    }
  });
}

请注意，我没有对取消选中操作实现任何处理 - 是否清除表单或执行其他操作取决于您。