angular form.io form-builder custom component get reference

I’m developing in ANGULAR 10

I use form.io form-builder to render components

I add custom component that drow grid (ag-grid) According to this link add custom Components with Angular Elements

every think work well

I drag and drop the table several times to draw multiple tables.
I enclose a photo of how the form looks like after the drag and drop action into the form

enter image description here

The problem .

when form.io render my custom component that draw the ag-grid , i need to get the connection string and the sql statement from the component definition (json).

I do not know how to get this information from my custom component at the time it’s be rendering. Without this information, I do not know generate the column names and row’s content.

This is my project

builder component contain the formio tag

aggrid component is my custom component for display ag grid

enter image description here

formio.ts

import { Injector } from ‘@angular/core’;
import { FormioCustomComponentInfo, registerCustomFormioComponent } from ‘angular-formio’;
import { AggridWrapperComponent } from ‘./aggrid-wrapper.component’;

export function minimalEditForm() {
  return {
    components: [
      { key: 'type', type: 'hidden' },

      
      {
        weight: 10,
        type: 'textarea',
        input: true,
        key: 'key',
        label: 'sql statement',
        tooltip: 'please enter your sql statement',
      }
    ],
  };
}
const COMPONENT_OPTIONS: FormioCustomComponentInfo = {
  type: 'sqlaggrid',
  selector: 'sql-grid',
  editForm: minimalEditForm,
  title: 'sql-grid',
  group: 'basic',
  icon: 'fa fa-star',
};



export function registerAgGridComponent(injector: Injector) {
  registerCustomFormioComponent(COMPONENT_OPTIONS, AggridWrapperComponent, injector);

}

aggrid-wrapper.component.html

<ag-grid-angular style="width: 500px; height: 500px;" class="ag-theme-alpine"
   [gridOptions]="gridOptions">
</ag-grid-angular>

AggridWrapperComponent

    import { Component, EventEmitter, Input, ElementRef, Output ,ViewChild} from '@angular/core';
    import { FormioCustomComponent } from 'angular-formio';
    
    
    import { Grid, GridOptions } from "ag-grid";
    
    @Component({
      selector: 'app-aggrid-wrapper',
      templateUrl: './aggrid-wrapper.component.html',
      styleUrls: ['./aggrid-wrapper.component.css']
    })
    
    export class AggridWrapperComponent implements FormioCustomComponent<number>  {
      @Input()
      value: number;  //number is missing (null)
    
      @ViewChild('aggrid') input; 
    
      @Output()
      valueChange = new EventEmitter<number>();
    
      @Input()
      disabled: boolean;
    
      private _value: number;
    
    
    
     
      public gridOptions: GridOptions;
    
      constructor(private elRef: ElementRef) {
        this.gridOptions = <GridOptions>{
          columnDefs: this.createColumnsDefs(),
          onGridReady: (params) => {
            this.gridOptions.api.setRowData(this.executeStatement());
          }
        }
      }
     
      createColumnsDefs() {
    
        /* return the grid columns */

       /*If I could get the field definition containing the SQL statement   then I could return the columns of the grid */
        return ???;
      }
    executeStatement(){
    
    /* get the grid rows  */
/*If I could get the field definition containing the SQL statement   then I could execute the statement and back the rows  */
    return ??? */
    
    }
    
    }

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule ,Injector } from '@angular/core';
import { RouterModule } from '@angular/router';
import {AppConfig} from './formio-config';
//import { AppRoutingModule } from './app-routing.module'
import { FormioModule } from 'angular-formio';
import { AppComponent } from './app.component';
import { BuilderComponent } from './builder/builder.component';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { RatingWrapperComponent } from './rating-wrapper/rating-wrapper.component';
import { registerAgGridComponent} from './aggrid-wrapper/formio'
import { AggridWrapperComponent } from './aggrid-wrapper/aggrid-wrapper.component';
import { AgGridModule } from 'ag-grid-angular';


import { HttpClientModule } from '@angular/common/http';

@NgModule({


  declarations: [
    AppComponent,
    BuilderComponent,
    AggridWrapperComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
    FormioModule,
    BrowserAnimationsModule,
    NgbModule,
    AgGridModule.withComponents([])
  ],
  exports: [RouterModule],
  providers: [ ],
  bootstrap: [AppComponent]

})
export class AppModule{

  constructor(injector: Injector) {
    registerAgGridComponent(injector)
  }
}

I am missing the reference to the component definition

any idea ?

48 thoughts on “angular form.io form-builder custom component get reference”

  1. 854058 630035Oh my goodness! a great write-up dude. Thanks a whole lot Nonetheless We are experiencing trouble with ur rss . Do not know why Not able to sign up to it. Perhaps there is anybody getting identical rss problem? Anyone who knows kindly respond. Thnkx 395307

    Reply