formio / ngformbuilder Goto Github PK
View Code? Open in Web Editor NEWThe Form.IO Form Builder Application
Home Page: http://formio.github.io/ngFormBuilder/
License: MIT License
The Form.IO Form Builder Application
Home Page: http://formio.github.io/ngFormBuilder/
License: MIT License
Might be irrelevant for node/gulp/... gurus, but as this is my first real exposure to these, it took me time to figure out how to run a build. Moreover, the results I'm getting are a bit different from what is available in dist. I'm getting a consistent build result on Windows and Mac, but they slightly differ from what is check-in Github. Although it seems to work.
Here are the instructions I used:
1- Cloned ngFormio & ngFormBuilder to the following folders:
[+] MyFolder
[+] ngFormio
[+] ngFormBuilder
2- Ran the following commands assuming that gulp is already installed globally (on Mac, a few sudos are required):
cd /MyFolder/ngFormio
npm install
bower install
-> choose 2 for angular-bootstrap 2.1.3
npm install gulp --save-dev
gulp build
npm link
bower link
cd ../ngFormBuilder
npm install
bower install
-> choose 2 for anular-bootstrap 2.1.3
npm install gulp --save-dev
gulp build
Would be great if you can amend these instructions and publish them
With the commit formio/ngFormio@90d015b, a change was introduced to how fields are marked as Required. The isRequired()
function is being used instead of component.validate.required
.
The function is being passed to the component in this line
$scope.isRequired = $scope.$parent.isRequired;
That works in the form renderer. However, in the form builder, there's no isRequired function. That prevents required fields from getting the class that renders a red asterisk next to the label.
ng-class="{\'field-required\': isRequired(component)}"
That's in the fieldWrap function here.
Any idea how to fix this?
In many applications there is a need for a select component where you can search for an item and select it from a displayed list.
Currently, we can accomplish this using the select component specifying a url endpoint to call. This endpoint is expected to return a complete list of options to populate the select component. When a user types in the component, a filter is applied to the available options.
However, often the list of items that could be returned is much larger than you would want to expose in a single call or to populate a single select component with. For example, a search by organization in our system would return more than 20,000 records for a given user. As a result, our endpoint does not return any values for a request specifying an empty search string.
As a result, the issue we're running into is as follows:
Thus a user will never be able to make a selection.
As a work around for this, I've changed my service to return a 400 (Bad Request) for empty strings. This results in console errors when rendering the form, but the user is able to make a selection since the validation check fails out.
Is there a way we can get support for this use case?
Recently, we made a PR, introducing the lockConfiguration
property that allows registering components that have their configuration locked so the edit modal wouldn't be opened when they're dragged into a form.
The problem that we're facing now is that these components aren't getting a unique key anymore. Since the modal doesn't open. The directive form-builder-option-key
doesn't get executed, and it's that directive that contains the uniquify
function that gives the components its unique key.
Is there any solution or workaround to this problem?
Is it possible to configure a custom component to not trigger the configuration modal when added to a form, while leaving the option to edit an already added component as it is now?
We found a workaround by using dot notation in the component key
field, but I don't think the dot notation is intended for that. As far as I could see, it has something to do with Resources.
Getting "Cannot assign to read only property 'name' of function 'function dropbox(formio){return{uploadFile:function uploadFile(file,fileName,dir,progressCallback){return new P......;}'" error
while using ng-formBuilder in my application. Can anyone help me
It can be tedious creating a new form that has multiple questions.
It would be nice to be able to add a new question to a form by cloning a previous question.
For example, you might have a section of 10 questions, where each question has a collection of radio buttons to indicate satisfaction level. Currently, after creating the first question in the form, the user then has to start from scratch to build the second question. This means re-adding all those radio buttons and their associated values. We should instead provide the ability to copy/clone the existing question to create the next one.
I would like to configure a set of components that are required/restricted from being removed a form definition.
We will be using the form builder in our application to allow our users to add/modify a default form we've defined. Our default form will include components we require to be present, as well as fields the user may opt to remove from their form.
Required component use cases we're solving for:
How we can build custom functionalities?
in "Date/Time Component" →
date →
Initial Mode
it works incorrectly.
in datetime.js. line num 96
change
''
to
''
then it work correctly.
sorry
my english is so prool
how can we use different ui framework instead of bootstrap.
When I submit a form first time it disable the submit button. I have enabled the button using jquery removing the disable attribute.
But after enable when I click on it the event does not fire.
How can I make the submit button enable so that I can submit the form multiple times?
There are notes in the help site. However, I cannot find any instructions on setting this up???
Utilize <form.io> to build your application including your API, documentation, validation and <form.io> which will point to your server for in house hosting. With this option you will need to install:
Docker
Mongo DB
I would like to have two buttons next to each other in a form, say
<div class="form-group">
<button class="btn btn-primary disabled" type="submit">Save</button>
<button class="btn btn-primary" type="button" style="margin-left: 10px;">Cancel</button>
</div>
How can I create this in the formbuilder? Do I have to create a "custom component"? It is not clear for me how to do this after reading section "Adding Components" at https://github.com/formio/ngFormBuilder.
Is this documented clearly for starters somewhere? At https://gitter.im/formio/formio I did not get reactions on the same question.
Is it possible to translate strings in the form builder, such as component labels or component setttings modal?
Can we use this builder independent of form.io Please help me
the HTML element component allows you to add custom attributes:
https://help.form.io/userguide/#html-element-component
Would be great if this was available on all components.
Hello,
Do you plan to add documentation to this package so we can use it with custom backend ??
thank you.
Hi, I am binding the form builder using display option to form. I have put a drop down with option Form and Wizard.
Now when I change the dropdown value from form to wizard, how can I change the form builder view from form to Wizard?
Please give me the sample angular code.
I am unable to upload a file with the other form data. The form data is uploading but the uploaded file is missing.
I am following the guideline given at https://github.com/danialfarid/ng-file-upload#server-side
I have used this sample code
div class="button" ngf-select="upload($file)">Upload on file select/div div class="button" ngf-select="uploadFiles($files)" multiple="multiple"Upload on file select/div Drop File: div ngf-drop="uploadFiles($files)" class="drop-box" ngf-drag-over-class="'dragover'" ngf-multiple="true" ngf-pattern="'image/*,application/pdf'"Drop Images or PDFs files here/div div ngf-no-file-drop>File Drag/Drop is not supported for this browser/div
But this sample code is not working.
Any thoughts on support for Component templates? Ability to configure a component in a form and then save that configuration for quick use later on?
Also a variation on this would be support to allow you to use the template in multiple forms and only have to make the change in 1 location to have all forms updated with the change to the template vs when you use the template it just does a one time copy of the config into the form.
The script/css references in index.html point to cdn served files, but trying to run the file in a local browser lead to an error:
formio-full.min.js:48 Uncaught Error: [$injector:modulerr] Failed to instantiate module formBuilder due to:
Error: [$injector:modulerr] Failed to instantiate module ngFormBuilder due to:
Error: [$injector:modulerr] Failed to instantiate module dndLists due to:
Error: [$injector:nomod] Module 'dndLists' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.5.8/$injector/nomod?p0=dndLists
Think it should anyway be better to have the references pointing to ./dist instead, which could help validating a build.
Also, it includes to css/formBuilder.css that is not misspelled (should be ngFormBuilder.css?)
The following code fire an event for Form submission and gets the form data.
<formio form="form" submission="submission"></formio>
$scope.$on('formSubmission', function (err, submission) { console.log(submission.data); }
But it does not work for Wizard submission.
How can I bind an callback event with wizard Submit Form button?
How to do this?
Hi, I am facing a problem when working with wizard.
I am giving the form builder a wizard json but it is not displaying perfect.
I have created a wizard like below.
But when I am binding this json to regenerate the wizard it is not displaying perfectly.
The Json I have set shown below
`angular.module('formioApp', [
'ui.bootstrap',
'ui.select',
'formio',
'ngFormBuilder',
'ngJsonExplorer'
]).run([
'$rootScope',
'formioComponents',
'$timeout',
function ($rootScope, formioComponents, $timeout) {
$rootScope.displays = [
{
name: 'form',
title: 'Form'
},
{
name: 'wizard',
title: 'Wizard'
}
];
$rootScope.form = {
"components": [
{
"type": "panel",
"input": false,
"title": "Page 1",
"theme": "default",
"components": [
{
"input": true,
"tableView": true,
"inputType": "text",
"inputMask": "",
"label": "Name",
"key": "name",
"placeholder": "",
"prefix": "",
"suffix": "",
"multiple": false,
"defaultValue": "",
"protected": false,
"unique": false,
"persistent": true,
"validate": {
"required": false,
"minLength": "",
"maxLength": "",
"pattern": "",
"custom": "",
"customPrivate": false
},
"conditional": {
"show": "",
"when": null,
"eq": ""
},
"type": "textfield",
"$$hashKey": "object:179",
"tags": []
}
],
"$$hashKey": "object:143"
},
{
"type": "panel",
"title": "Page 2",
"isNew": true,
"components": [
{
"input": true,
"tableView": true,
"inputType": "text",
"inputMask": "",
"label": "Address",
"key": "address",
"placeholder": "",
"prefix": "",
"suffix": "",
"multiple": false,
"defaultValue": "",
"protected": false,
"unique": false,
"persistent": true,
"validate": {
"required": false,
"minLength": "",
"maxLength": "",
"pattern": "",
"custom": "",
"customPrivate": false
},
"conditional": {
"show": "",
"when": null,
"eq": ""
},
"type": "textfield",
"$$hashKey": "object:311",
"tags": []
}
],
"input": false,
"key": "page2",
"$$hashKey": "object:293",
"theme": "default"
}
],
"display": "wizard",
"page": 1,
"numPages": 2
};
var originalComps = _.cloneDeep($rootScope.form.components);
//originalComps.push(angular.copy(formioComponents.components.button.settings));
$rootScope.jsonCollapsed = true;
$timeout(function () {
$rootScope.jsonCollapsed = false;
}, 200);
var currentDisplay = 'form';
$rootScope.$watch('form.display', function (display) {
if (display && display !== currentDisplay) {
currentDisplay = display;
if (display === 'form') {
$rootScope.form.components = originalComps;
} else {
$rootScope.form.components = [{
type: 'panel',
input: false,
title: 'Page 1',
theme: 'default',
components: originalComps
}];
}
}
});
}
]);`
The generated wizard is below
I found the json is displaying in the right side after regenerate, some property has changed automatically to
page: 0, numPages: 1
Hi, I managed to make a small modification to ngformbuilder-full.js so that it pushes submissiondata to a websocket. I can load the formdefinitions json also via the websocket, after creating the necessary div elements in javascript, with the javascript part in https://github.com/formio/ngFormBuilder/blob/master/index.html in a function where the json is an input param and assign $rootScope.form = the input parameter. the formbuilder is loaded via
if (typeof angular == 'undefined') {
$.ajax({
cache: true,
url: '/js/ngFormBuilder-full.js',
dataType: 'script',
success: function () {
document.getElementById('taskReferenceDiv').task.renderFormIOFormContents(resp.formfields[0])
}
});
}
This works. My question is: after submit of a first form I would like load a next json with formdefinitions, while I stay on the same page. I can remove the divs I named above after the submit, maybe do $rootScope.$destroy(), but how can I prepare to show this next form? typeof angular != 'undefined' now, I cannot load ngFormBuilder-full.js a second time. I have no particular angular knowledge.
Appreciate your work, it is a great product!
When I click on submit button it execute my callback function two times.
Here is my execution code.
`$rootScope.$on('formSubmission', function (err, submission) {
var formIOJSON = JSON.stringify(submission.data, null, " ");
formIOJSON = formIOJSON.replace(/"/g, "'");
$.ajax({
url: "/WebServices/AlpacaService.svc/SaveFormIOFormData?formIOJSON=" + formIOJSON,
success: function (data, text) {
alert("Save");
},
error: function (request, status, error) {
alert("error");
}
});
});`
The service is calling two time and data is saving twice.
How can I stop firing callback more than one?
I see that validations on fields are executed when you leave them. Is it possible to validate all fields when clicking on the disabled submit button? Maybe it would be good to have this as default behaviour.
In form edit mode in form builder, I am trying to assign my saved form components json object in the $scope. But it is not binding in form builder, it is binding a default submit button always.
My form building code is
angular.module('formioApp', [
'ui.bootstrap',
'ui.select',
'formio',
'ngFormBuilder',
'ngJsonExplorer'
]).controller('formioAppCtrl', function ($scope) {
$scope.form = {
components: [],
display: 'form'
};
$scope.$on('formSubmission', function (err, submission) {
console.log("Saved");
console.log(submission);
})
$scope.submission = {
data: {
//"firstName": "Khademul"
}
};
});
In javascript I am trying to assign my saved form components object
angular.element("form:first").scope().form.components = formSchemaJSON;
var $scope = angular.element("form:first").scope();
$scope.$apply();
I think the scope is overlapped by form IO default components.
How to fixed it?
Is there a way to disable the scope change by form IO?
Is there a template repo for creating new components? Docs on implementing the various config fields, etc?
How to submit y or n in checkbox component.
I'm experimenting formio and I created a test app that works perfectly with https://npmcdn.com/[email protected]/dist/ngFormBuilder-complete.js (from the code pen). Now, when try with the files in the dist/ repo instead, I'm getting this error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module formioApp due to:
Error: [$injector:modulerr] Failed to instantiate module ngFormBuilder due to:
ReferenceError: _ is not defined
It comes from the email component:
module.exports = function(app) {
app.config([
'formioComponentsProvider',
function(formioComponentsProvider) {
var views = _.cloneDeep(formioComponentsProvider.$get().components.textfield.views);
Where it looks like '_' is not available (lodash not yet loaded?)
When I'm trying to include dist/ngFormBuilder.js
I'm expecting to get it without dependencies but it comes with already bundled lodash.
As a result if host application already have lodash it's included twice.
Current behaviour: dist/ngFormBuilder.js
bundled with lodash
library
Expected behaviour: dist/ngFormBuilder.js
bundled without lodash
library
Uncaught Error: [$injector:modulerr] Failed to instantiate module formBuilder due to:
Error: [$injector:modulerr] Failed to instantiate module ngFormBuilder due to:
Error: [$injector:modulerr] Failed to instantiate module dndLists due to:
Error: [$injector:nomod] Module 'dndLists' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
I'm trying to upgrade to the latest version of ng-formio-builder
, but it fails due to angular-ckeditor
which cannot be installed via npm
in a project without bower
. Would you be up for including angular-ckeditor
as a static file to your project, so we don't have to install it?
Changing pages in the wizard builder seems to have some bugs? Looking for confirmation.
Able to replicate in Safari and Chrome.
The UI seems to get stuck when trying to nav between pages in the builder. You select Page 1 vs Page 2 and the colours change, but the form builder does not. Pages seem to also get out of order.
This known?
If unable to replicate or see the same issue, will update with further gifs and specific replication steps.
Hi, the extra submit button issue was fixed for form builder component binding and was fixed as follows.
<form-builder form="form" options="{ noSubmit: true }"></form-builder>
But same problem found when I was working on wizard. when I change the drop down value to wizard that time it add an extra submit button. And same issue is in the online form builder
http://codepen.io/travist/full/xVyMjo/
When I refresh the page the form builder is loading. But when I click on a menu to go to the page which is loaded using Microsoft ScriptManager and UpdatePanel that time the form builder is not loading in the page.
Hi all. Have been browsing around in this great tool for some hours now. But so far not able to add in a fully functional custom component :(
The quite various tips found in threads and on this site does not make it easy to understand how to move on.
What is working is to add this code in the index.html file. But this code only generates the element in the drop down. It does not generate the visual component when dragged onto the form itself.
angular
.module("formBuilder", ["ui.bootstrap", "ui.select", "formio", "ngFormBuilder", "ngJsonExplorer", "ngCkeditor"])
.config([
'formioComponentsProvider',
function (formioComponentsProvider) {
formioComponentsProvider.register('myfield', {
title: 'My Field',
template: 'formio/components/icons.html',
controller: ['$scope', function($scope) {
}],
group: 'custom',
icon: 'fa fa-heart-o',
settings: {},
views: []
});}])
How have people moved on from here, to get fully functional custom components?
Thanks, Martin
Hi, I'm using FormIo in my project and I have problem in adding new component to FormIo source .
I try the way be approached but I didn't get any result !
Unfortunately I can't seem to use the Wizard with much success, and this seems largely (if not entirely) related to the fact that it's very easy to drop form elements outside of the parent .form-group container (the one with the Page header). The usual result is that form elements that were previously added disappear, or that the containers get swapped ('Page 1' appears when clicking on in 'Page 2').
I can get things to work reasonably well if I'm extra careful, but not dropping elements outside the container is actually quite hard to do, and one small slip can result in lost work.
The behaviour is the same on both the CodePen demo, which uses v. 1.12.13 and an implementation on my local machine, which uses 2.2.4 (via CDN).
It's pretty easy to replicate.
Chrome 53.0.2
Not sure if this is something I can fix myself, but I will look at it. In the meantime let me know if you need any more info. Thanks a lot -
Edit: updated issue title
For example in the definition of a custom validation of a select component you can see "The global variables input, component, and valid are provided.". But when I put
console.log(component)
valid = true
in the editor I get runtime "component is not defined" in red letters below the element. For global variable input the console.log works as expected.
But what I would really like to have is a way to change the label of another element in the form depending on the input value of this select. Do you have a suggestion on how to accomplish this?
Hello,
The formbuilder seems to have stopped working. I cannot seem to pinpoint the error.
It throws, Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.5/$injector/modulerr?p0=formioApp&p1=Error%…udflare.com%2Fajax%2Flibs%2Fangular.js%2F1.5.5%2Fangular.min.js%3A21%3A332)(…)
The angular JS documentation says I am missing a module. However, this is for a working local example which I was looking into to add custom components, which was working around a week ago.
Also, the form in the Working Example link provided in README.md is not working anymore.
Any thoughts on supporting ability to create a form and then save it so it can be quickly used on other forms/apps.
This is especially useful for wizard forms.
Same requirements as #128 but higher level at the form
I would like a mechanism for restricting editable fields displayed when editing a component in the builder. For example, we would like to restrict our users from being able to enter custom javascript for any component.
Ideally we would be able to provide a whitelist/blacklist of editing options to include or exclude when configuring the builder on our page.
I have two drop down in the form. In the second drop down I have added a condition, display true when select a item form the first drop down. But from view when I change the first drop down value to the conditional value it shows the following error. Please help how to fixed it.
Error: $compile:ctreq
Missing Required Controller
Controller 'formioElement', required by directive 'formioElement', can't be found!
Where is method to create json of Form object so i can manipulate the json.
I want "key": "columns1", and "type": "columns", one after another.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.