Comments (3)
Done !
module.exports = function(app) {
app.config([
'formioComponentsProvider',
function(formioComponentsProvider) {
formioComponentsProvider.addGroup('GroupName',{
title: 'GroupTitle'
})
console.log(formioComponentsProvider);
var isNumeric = function isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
};
formioComponentsProvider.register('ComponentName', {
title: 'ComponentTitle',
//Define template link here
template: 'formio/components/component.html',
settings: {
},
group: 'GroupName',
controller: ['$scope', function($scope) {
}]
});
}
]);
from ngformbuilder.
Hello @virajkanwade ,
You can first config your formiocomponents like this
app.config(['formioComponentsProvider', function (formioComponentsProvider) {
and then you can add your group and title like below:
formioComponentsProvider.addGroup('Group Name', { title: 'Group Title' });
after that you can register your custom component using the same group name inside this
formioComponentsProvider.register('componentName',{
});
For example a simple custom component will look like this :
app.config(['formioComponentsProvider', function (formioComponentsProvider) {
formioComponentsProvider.addGroup('amazing', { title: 'Custom Template Components' });
formioComponentsProvider.register('reCAPTCHA', {
title: 'reCAPTCHA',
template: 'The URL where the component will load',
controller: ['$scope', function ($scope) {
}],
group: 'amazing',
icon: 'fa fa-refresh',
////Here you can add your own json scema for this component///////////
});
}]);
You can add this in a new file and add the script src where the main page is loaded.
<script src="/FolderName/Scripts/Customcomponent.js" type="text/javascript"></script>
Hope this helps.
from ngformbuilder.
Can you please provide more details? Where to write this code? how to call the function?
Thanks
from ngformbuilder.
Related Issues (20)
- panel component conditional advanced
- Unknown component while rendering
- Can anyone reply why key is having a prefix of undefined ?
- How to add "multiple values" to a layout component ?
- ngFormBuilder support multiple locales ? HOT 1
- panel/fieldset collapsible and collapsed HOT 3
- overlay width settings don't seem to be working
- How to add components
- Support to Angular 4+
- Changing the style of a components HOT 1
- Render Json output HOT 2
- How to create custom component with draggable property inside it. HOT 1
- How to set a unique key for a custom component that doesn't change according to label? HOT 3
- How to bind the resources to the custom form Builder HOT 1
- How to turn off searching option in select component? HOT 3
- Json binding to formMapping ?
- how to give dummy values to angular formio form HOT 2
- [QUESTION] Can I add new keys to components? HOT 1
- [QUESTION] How to prevent request to form.io API (api.form.io/form)? HOT 8
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 ngformbuilder.