Javascript 选中复选框后，如何将窗体控件的所有值传递给另一个窗体？

我进入了表格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>

---

有两种方法可以做到这一点

一种方法是使用服务

做一个角度服务，像这样做get和set函数

 // declare global variable in service
data : any;

 // function to set form-1 data
public setFormData(formData){
  this.data = formData;
}

// function to get form-1 data
public getFormData(){
  return this.data;
}

在form-1组件中，对formSubmit调用setFormData函数，如下所示

onSubmit(){
   this.myService.setFormData(this.MyForm.value);
}

在form-2组件中，在ngOnInit中调用getFormData

---

首先以第一种形式将模板变量添加到输入中：

<mat-form-field>
  <input matInput placeholder="Nombre" formControlName="names" required #nameVar>
  <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}} #optionVar></mat-option>
  </mat-select>
</mat-form-field>

---

如果希望以一般方式执行此操作，而不关心窗体是否相同或可能有多少控件，或者是否存在嵌套的窗体组或窗体数组，则可以基于常用控件名称复制值并使用递归：

HTML

---

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

您可以提供一些示例代码吗？您可以使用document.forms，它将返回视图中包含所有表单的数组。非常感谢！这是我的工作。谢谢你！

<mat-form-field>
  <input matInput placeholder="Nombre" formControlName="names" required #nameVar>
  <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}} #optionVar></mat-option>
  </mat-select>
</mat-form-field>

<mat-checkbox (change)="test($event, nameVar.value, optionVar.value)">Same info?</mat-checkbox>

test(event, name, option) {
    console.log(event.checked, name, option);
}

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

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

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