How to register custom component in ng2-formio

[Miata74]

I want to register custom component to angular2 application using ng2-formio.

What is the proper way to do that? I can define my custum component in my angular 2 project by extends BaseComponent like the other components do such as https://github.com/formio/formio.js/blob/2.x/src/components/textfield/TextField.js

But how can i register that component, that formio will use it?

Thanks for your help.

[travist]

The way you do this is to add it to the Components array like so.

import Components from 'formiojs/build/components/index’;
import { BaseComponent } from ‘formiojs/build/components/base/Base’;

export class CustomComponent extends BaseComponent {
  // Your custom functionality goes in here….
}

// Register this with the components registry.
Components.custom = CustomComponent;

Now, if your type is set to custom for your field, then it will trigger your custom component class to render it and serve as the business logic for that component.

[Miata74]

Hi. Tnx for your answer. I tried what you suggested but I got error: Cannot find module 'formiojs/build/components/base/Base'.

I tried to do this in ng2 webpack 2 typescript project type.

How can i properly import formiojs/build/components/base/Base.js that i can use it for extending my custom component in such type of project, because formiojs doesn't contain typescript definitions?

[mikethm]

works for me using https://github.com/formio/ng2-app-starterkit make sure you do npm install to install your dependencies

[Miata74]

It works.

[travist]

Here is updated gist of how to get a custom component working.

https://gist.github.com/travist/59fa77086ec899e24992fc1508e61075

You need to make sure you add at the bottom of your file.

Formio.registerComponent('custom', CustomComponent);

Where "custom" is the name of your component, and CustomComponent should be the class name.

[hk-skit]

I've tried the same approach to render the custom component but no luck. I've asked the question on StackOverflow. Can any one please tell how to resolve it? Thanks.

[NavpreetSamra]

Thanks The above gist was not rendering properly.. import { BaseComponent } from './Base'; import { Formio } from 'formiojs/full'; export class CustomComponent extends BaseComponent { constructor(component, options, data) { super(component, options, data); } } Formio.registerComponent('custom', CustomComponent);

[NavpreetSamra]

it worked after initialize with following line in the constructor of component where i want to use form.io ... Formio.registerComponent('custom', CustomComponent);

[juliamarjana]

Hi ,

I would like to know if it 's possible in formio to define a component in such a way that , for example , in a input of type text, when user starts to write , a custom action (on the front-end ) will be executed .

Is this possible ?

Also , is it possible to define a form with more buttons ? Update , Delete , Save ...

Thank you .

[NavpreetSamra]

yes, its possible add changeEvent to <formio #formEditor src='your_url' (change)="changeEvent($event)" (render)="afterrendered($event)"> In your component ts file

changeEvent(event){ if(event.changed!=undefined && event.changed.component.key=="your_component_key") console.log('hello world'); }

[juliamarjana]

Thank you for your answer . Really...

But in this way , my component is listening to all changes that are happening in my form .

If I have more input fields, is it possible to know which input field has been changed , and react only to changes to only a particular field ??

Also , and I hope that this is my last question , if I use many buttons on a form , for example update and delete , is there a way to know which button has been clicked , and react with actions , accordingly ?

Thank you for your kindness ...

[chetanmenge]

@Navpreet2289 Looks like custom component worked for you.

But in my case, I'm having issues and getting error as Unknown component error for my custom component.

It was working with angular-form.io versioni 1.18 and formiojs version 2.23 but after upgrading angular-formio : "3.9.1" (with latest version ) I started getting unknown-component error.

FYI, with earlier version , I have created custom component by extending NumberComponent, Sample code,

import { NumberComponent } from '@formiojs/lib/components/number/Number'; export class CustomNumberComponent extends NumberComponent{}

and Was registering it as,

import { Formio } from '@formiojs/full'; Formio.registerComponent('customNumberBox', CustomNumberComponent );

Do I need to register it any other way ?

@travist Tried to refer Checkmatrix example but it did not helped. Please let me know if you have any inputs on this ?

Thanks, Chetan

[KarthikJohn]

Hello FormIo Team, I am having Form Builder in my application with custom component in it. After creating a form, in form builder, how can I provide title or name to that form. And aslo What can be done to save that form or JSON data to my local mongoDB.

Thanks in Advance.