Comments (13)
works for me using https://github.com/formio/ng2-app-starterkit
make sure you do
npm install
to install your dependencies
from angular.
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?
from angular.
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.
from angular.
It works.
from angular.
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.
from angular.
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.
from angular.
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);
from angular.
it worked after initialize with following line in the constructor of component where i want to use form.io ...
Formio.registerComponent('custom', CustomComponent);
from angular.
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 .
from angular.
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');
}
from angular.
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 ...
from angular.
@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
from angular.
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.
from angular.
Related Issues (20)
- [Question] - How to get paid support? HOT 1
- [Question] - How to create formio module as a Angular Library? HOT 2
- [Custom Components] Problem with advanced logic HOT 1
- Loading gear always visible even after successful form loading
- How to remove individual options (such as Display/Label Position or Data/Persistent). HOT 1
- Flickering occurs for the field if there is a JavaScript logic for that (even if you clicked any other field) HOT 3
- Intercepting Drag&Drop event
- Angular 17 and FormIO runtime error HOT 2
- [Custom Components] Ability to optionally select multiple values in Custom Component HOT 2
- [Question] how to disable to set the defaultValue to all the questions?
- [Custom Components] Custom Components View only mode. HOT 1
- [Issue] Submit event is not firing in Form IO HOT 1
- Template is not exported from package
- [Custom Components] HOT 1
- Using with Angular Material
- [Question] How to add event or call function on button click and remove data from key and value in formio
- How to add new button in any tab on drag field and listen in component ? [Custom Components] HOT 1
- [Question] Install formio but say conflicts between different versions of zone.js
- [BUG] Unable to refresh the screen after making form read-only after submit the form.
- [BUG] Formio throws error while running SSR build
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular.