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

【问题标题】：How to pass reusable form data in angular?如何以角度传递可重用的表单数据？
【发布时间】：2020-05-26 14:49:40
【问题描述】：

我正在使用 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

【解决方案1】：

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

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

在函数 send you 中具有动态表单的所有公共属性，例如自己的变量“form”

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

【讨论】：

【解决方案2】：

在你的动态表单中有这样的函数来初始化表单变量

@Input() formData;
buildForm() {
    this.myForm = this.fb.group({
     ...
    });
  }

在 ngOnInit 和 ngOnchanges 上触发构建表单

ngOnInit() {
    this.buildForm();
  }

ngOnChanges(changes: SimpleChanges) {
        if (changes.formData && !changes.formData.firstChange){
            this.buildForm();
        }
}

现在在你的 App 组件中

send() {
this. person = // your code here
}

【讨论】：