Custom Component is not render in form.io tag

[ThakkarHardik]

hello @travist

I made 2-3 custom component now i m rendering one by one on click of menu at first time my custom component is rendering proper , second time come to that component it is not rendering the proper , can you please help me out here. (first time click result )

(second time result it means click on other menu and again click on the same menu)

[wag110894]

Hello @ThakkarHardik, Can you confirm that you have read through the documentation and ensure that you are doing things correctly? https://github.com/formio/formio.js/wiki/Custom-Components-API https://github.com/formio/contrib

[benjamindamm]

I have the same issue. I am using my custom components in the FormBuilder as well, but when it comes to render them i get just an empty tag.

<div ref="component"
  class="form-group has-feedback formio-component formio-component-list-viewer formio-component-listViewer formio-component-label-hidden"
  id="edpuv0o">
  <div ref="element">
    <!-- This is where my component should be -->
  </div>
  <div class="formio-errors invalid-feedback" ref="messageContainer"></div>
</div>

[TrevSAU]

I've been struggling with this as well. It looks to me like my angular control <app-whatever></app-whatever> is being removed by the Sanitizer. I can get the control to render by adding an exception to the SanitizeConfig for the form renderer as follows:

const form = await Formio.createForm(
      this.getRootElem(),
      {
        components,
      },
      {
        // noAlerts: true,
        formio: formIO,
        readOnly: this.readonly,
        formConfig: {
          hide: !this.appSettings.show,
        },
        sanitizeConfig: {
          allowedTags: ['app-whatever'],
          addTags: ['app-whatever']
        }
      }
    );

I still haven't found how to configure the Sanitizer for the form Builder however. Also I would have thought this would be handled by angular-formio registerCustomFormioComponent method as it's annoying to have to set these all in advance.

[mubinahmed]

Did anyone figure out the solution for this? I have the same issue as well.

[dev-thinks]

I've been struggling with this as well. It looks to me like my angular control <app-whatever></app-whatever> is being removed by the Sanitizer. I can get the control to render by adding an exception to the SanitizeConfig for the form renderer as follows:

const form = await Formio.createForm(
      this.getRootElem(),
      {
        components,
      },
      {
        // noAlerts: true,
        formio: formIO,
        readOnly: this.readonly,
        formConfig: {
          hide: !this.appSettings.show,
        },
        sanitizeConfig: {
          allowedTags: ['app-whatever'],
          addTags: ['app-whatever']
        }
      }
    );

I still haven't found how to configure the Sanitizer for the form Builder however. Also I would have thought this would be handled by angular-formio registerCustomFormioComponent method as it's annoying to have to set these all in advance.

After struggling for an hour with this situation, this renderoptions object fixes in the form renderer part. Thanks for the clue, @TrevSAU

[OleksandrPoshtaruk1533]

<form-builder [form]="form" [options]="formOptions">

formOptions = { sanitizeConfig: { allowedTags: ['some-wrapper'], addTags: ['some-wrapper'] } };

Made it work for builder

Now need to do same for renderer after checking source code here and here I could make renderer to display custom component tags Just in ngOnInit of parent component

registerCustomTag('custom-tag', this.injector);