你需要把整个表单对象附加到你的ts变量上。2下面是我使用的代码片段。

• • 超文本标记语言**

<div>
    
    <form-builder [form]="form" (change)="onChange($event)" (submit)="onSubmit($event)" #formio></form-builder>
    
    <div class="well jsonviewer">
      <pre id="json"><code class="language-json" #json></code></pre>
    </div>
    
</div>

• • ts**

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
    
    @Component({
      selector: 'app-user-add',
      templateUrl: './user-add.component.html',
      styleUrls: ['./user-add.component.css']
    })
    export class UserAddComponent implements OnInit {
      @ViewChild('formio') formIO: any;
      title = 'ASW Form Builder Demo';
      jsonData:any[]=[];
      @ViewChild('json') jsonElement?: ElementRef;

    
      constructor() { }
    
      ngOnInit(): void {
      }
    
      // Publish Template
      saveJsonData(data: any){
        //.... 
        console.log(data);
        // do something
      }
      
      //Preview Template
      previewTemplate(data: any){
        this.jsonData = data;
      }
    
      public form: Object = {components: []};
      onChange(event) {
        console.log(event.form);
      }
    
      onSubmit(param){
       // You can use this.formIO.form to get the entire json
      console.log(this.formIO.form);
      }
    }

正如我所看到的，你正在使用asw表单生成器，这是易于使用，并创建快速开发和设计的网页表单，其中包括几个控件。
首先，您需要创建一个表单与asw表单生成器的帮助下提交按钮之后，一旦你会点击提交按钮表单生成器将发出JSON数据在提交方法。
例如：
HTML代码：

<asw-form-builder [uploadData]="jsonData1"
            [isShowPreviewButton]="isShowPreviewButton"
            [isShowJsonDataButton]="isShowJsonDataButton"
            [isShowPublishButton]="isShowPublishButton"
            (publishClick)="saveJsonData($event)" 
            (previewClick)="previewTemplate($event)"
            (buttonClick)="buttonClick($event)"
            (aswModelChange)="onSelectionChange($event)"></asw-form-builder>

组件代码：

export class AppComponent {
title = 'ASW Form Builder Demo';
jsonData: any[] = [];
jsonData1: any[] = [];
isShowPreviewButton = false;
isShowJsonDataButton = true;
isShowPublishButton = false;

// Publish Template
saveJsonData(data: any){
    //.... 
    console.log(data);
    // do something
}

//Preview Template
previewTemplate(data: any){
    this.jsonData = data;
}

// when you click on submit button form builder will call this method
buttonClick(data: any): void {
    console.log(data);
}

// form builder will call this method when any control model will be changed 
onSelectionChange(control: any): void {
    console.log(control);
}

}
预览创建表单的HTML代码：

<asw-preview-template [formContainer]="jsonData" 
(buttonClick)="buttonClick($event)"
(aswModelChange)="onSelectionChange($event)">

按钮点击和onSelectionChange方法应与下面的演示和文档https://github.com/asoftwareworld/ASW-Form-Builder的GitHub URL相同
如果您需要任何帮助，请告诉我们