formio / ngformbuilder

The Form.IO Form Builder Application

This repository is now considered legacy and no longer supported. It has been replaced with our latest Form Builder and Renderer @ https://github.com/formio/formio.js and Angular libraries @ https://github.com/formio/angular.

Please take a look at our recent repositories and help documentation at the following links.

• https://help.form.io
• https://github.com/formio/formio.js
• https://github.com/formio/formio
• https://github.com/formio/react
• https://github.com/formio/angular
• https://github.com/formio/vue

The Form.io Form Builder

This library provides form building capabilities to an Angular.js application. This form builder's purpose is to construct a JSON object reporesentation of a form, which could then be handed off to a Form Renderer such as the one found @ https://github.com/formio/ngFormio. The following landing page should provide a good example of how this form builder works.

See Working Example

The form builder can be embedded within your application using the following embed code.

<form-builder form="myform"></form-builder>

Where myform would be a form object that is placed on the scope of the controller containing the form builder.

Installation

To install this within your application, you will first need to include the following

Adding Components

To add a component, add it in the config phase.

  angular
    .module('myApp')
    .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: []
        });

Removing Components

To remove default components or groups from the form builder, set them as disabled in the run phase.

  angular.module('myApp')
    .run(['formioComponents', function(formioComponents) {
      formioComponents.components.textfield.disabled = true;
      formioComponents.groups.layout.disabled = true;
    }]);

Form.io

This project is provided by Form.io, which is a combined form and API platform for Developers.

ngformbuilder's Issues

`dist/ngFormBuilder.js` includes bundled lodash library

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

Wizard page nav bug?

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.

"component" not available in "custom validation"

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?

How do you install the Open Source Version?

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

Page wizard - unexpected behaviour when dropping components outside page container

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.

1. Toggle to 'Wizard' mode
2. Click '+ page' button
3. Click 'Page 2'
4. Drag-and-drop a text field into the area inside the container; hit 'Save' to close modal.
5. Click 'Page 1', then back to 'Page 2' - everything is good, field is there.
6. Drag-and-drop a text field into the area outside the container; hit 'Save' to close modal.
7. Click 'Page 1', then back to 'Page 2' - area is empty.

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

Adding pre-configured components to a form without launching the edit modal

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?

Required fields not having a red asterisk in the form builder.

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?

Error showing when running the index.html page in browser from the project folder.

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.

Error loading the builder

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?)

A custom Component template?

Is there a template repo for creating new components? Docs on implementing the various config fields, etc?

Form builder

Can we use this builder independent of form.io Please help me

Support for custom html attributes on all form components

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.

Cannot assign to read only property 'name' of function 'function dropbox(formio){return{uploadFile:function uploadFile(file,fileName,dir,progressCallback){return new P...<omitted>...;}'

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

Build instructions

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

set focus to the first enabled object in the taborder after rendering a form with ngformbuilder

How to do this?

Why Submit button fire two time.

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?

Date / Time Component

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

Configure component to not trigger the configuration modal

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.

adding a new component

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.

Add custom component

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

How to enable the submit button?

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?

Configure required components to include in definition

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:

• A required component can be moved around on the form
• A required component's properties can be edited, except for the API field as that is how we map the value during submission
• A required component cannot be deleted from the form

Allow cloning of form elements

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.

Example is not rendering any values

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.

Form Templates?

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

How to submit Wizard data?

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?

Code to convert Display option from Form to Wizard in Form Builder.

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.

Wizard binding is not working.

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

field validation on click of the disabled submit button

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.

Do not install angular-ckeditor via npm

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?

Problem With Add new Component to FormIo

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 !

index.html is not up-to-date

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?)

Json create

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.

need help

I am trying to get a field label to appear on the same line as the fields.

But how to do using form builder

I think select boxes checkbox should have api for each value and label pair

I think select boxes checkbox should have api for each pair of value and label for easy mapping to backend.

need help

How to submit y or n in checkbox component.

Translating form builder strings

Is it possible to translate strings in the form builder, such as component labels or component setttings modal?

$scope is overlapped by formIO default form components.

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?

Documentation

Hello,

Do you plan to add documentation to this package so we can use it with custom backend ??

thank you.

How can i use Select component with a resource list?

Hi,
I need to use Select component with a custom list of resources in my project.
How can i provide this resource list?

Now when i use Select component with resource option I get this error:

TypeError: Cannot read property 'loadForms' of null

UI framework

how can we use different ui framework instead of bootstrap.

Select component using URL requires complete item list

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:

1. We render the form with a select component pointing to our getOrganization endpoint. Nothing is entered in the search parameter so our endpoint returns an empty list.
2. The user enters a search string into the select component and an organization matching the criteria is populated in the drop down.
3. The user selects the desired organization. Which triggers another call to the getOrganization endpoint to seemingly verify the selected item is in the list of valid options.
4. This validation call passes an empty string as the search parameter, which results in an empty list returned from our service.
5. Because the selected item isn't in the list of valid values, the selection is cleared.

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?

Error- Missing Required Controller

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!

Form Component Templates?

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.

How to edit/build ngFormBuilder

How we can build custom functionalities?

File Upload is not working.

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.

load and remove different forms succesively on the same page (json communication via websocket)

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!

Configure editable fields for components

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.

Form Builder is not loading during ajax post back.

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.

One Extra submit button is adding when display option is changed to wizard.

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/