Form.io form builder how to emit or submit data

Question

I am building a dynamic drag and drop form builder and i cant find a way to console log out the data of the form. here is the form component.html in which i am rendering the drag and drop form

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

And here is the component.ts I just wanted to console the form data out then I will send it to the API to be saved.

    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 {
      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){
      console.log(param);
      }
    }

Can anyone help me fetch the data from the form on submit? and can i do this on another division and button outside the form? I wanted to use my own submit button. or is there any tutorial that can explain this starting from the database design?

Answer 1

you will need to attach entire form object to your ts variable. Below is the code snippet that works for me.

HTML

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