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

如果要一般执行此操作而不必担心表单是否相同或可能存在多少个控件，或者是否存在嵌套的表单组或表单数组，则可以基于通用控件名称复制值并使用递归： / p>

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

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

Answer 2

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

一种方法是使用服务。

提供有角度的服务并像这样获得和设置函数

 // 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组件中，在getFormData中调用ngOnInit

ngOnInit(){
    this.form1Data = this.myService.getFormData();
}

Answer 3

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

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

选中复选框后如何将表单控件的所有值传递给另一个表单？

3 个答案: