Adding custom form.io components

Sometimes we need a custom component to show in our form.io forms, here's how.

First, make sure the dependency @webcomponents/custom-elements is installed in your implementation.

Add the line the following line to your scripts array in the angular.json of your implementation if it's not already there:

"node_modules/@webcomponents/custom-elements/src/native-shim.js"

Also, add the following line to polyfills.ts in the src folder of your implementation if it's not already there:

import '@webcomponents/custom-elements/custom-elements.min';

Create a custom form.io component, and a registration definition according to this guide:

https://github.com/formio/angular/wiki/Custom-Components-with-Angular-Elements#your-component

https://github.com/formio/angular/wiki/Custom-Components-with-Angular-Elements#registration-definition

Add your custom form.io component to the declarations array in your AppModule.

Finally, it is necessary to add the registration function, and your component selector under COMPONENT_OPTIONS, both exported from your registration definition file, to the environment file of your implementation under the key customFormioComponentRegistrations like in this example:

// environment.ts

...

import {RATING_COMPONENT_OPTIONS, registerRatingComponent} from '@app/custom-formio-rating';

....

export const environment: Environment = {
  ....
  customFormioComponentRegistrations: [{
    selector: RATING_COMPONENT_OPTIONS.selector,
    function: registerRatingComponent
  }]
}