时间戳

首页 > 解决方案 > 如何以角度传递可重用的表单数据？

angular - 如何以角度传递可重用的表单数据？

问题描述

我在角度 9 中使用反应形式。我想要可重复使用的形式。因此，我为表单创建了一个单独的组件。但我不知道如何在不点击表单组件的情况下将表单值传递给另一个组件，因为我希望每个组件都有单独的按钮。如何在 app.component 中编写发送函数？

form.component.html

 <form [formGroup]="form">
      <div *ngFor="let prop of personProps">
        <label>{{ prop.label }}:</label>

        <div [ngSwitch]="prop.type">
          <input *ngSwitchCase="'text'" [type]="prop.type" [formControlName]="prop.key">
          <input *ngSwitchCase="'number'" [type]="prop.type" [formControlName]="prop.key">
        </div>

      </div>
    </form>

app.component.html

<dynamic-form [formDataObj]="person"></dynamic-form>
<button (click)="send()"> click </button>

标签： angular

解决方案

只需使用模板引用变量（#nameVariable）

<dynamic-form #myform [formDataObj]="person"></dynamic-form>
<button (click)="send(myform)"> click </button>

在发送函数中，您拥有动态表单的所有公共属性，例如自己的变量“表单”

send(myform:any)
{
    if (myform.form.valid)
       console.log(myform.form.value)
}

推荐阅读