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:
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
}]
}
Last modified 2yr ago