angular form.io form-builder custom component get reference

Question

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

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

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 ?

scavenger scavenger · Accepted Answer · 2020-11-25T17:16:12

0

votes

have you tried getting the object by its key?

component = form.getComponent('keyName')

angular form.io form-builder custom component get reference

3 Answers