formio / ngformio Goto Github PK

JSON powered form rendering library for AngularJS + Form.io.

Home Page: http://formio.github.io/ngFormio/

License: MIT License

JavaScript 100.00%

ngformio's Introduction

An Angular.js JSON form renderer for Form.io

This library is meant to be used in conjunction with Form.io to provide dynamic JSON form rendering capabilities. This allows you to render any form using the schemas provided by Form.io in the following format.

<formio src="'https://myapp.form.io/myform'"></formio>

The following snippit of code will dynamically render the form within Form.io, as well as automatically hook that form up to the REST API generated from the same schema.

Here is a Demo

http://codepen.io/travist/full/xVyMjo/

Multi-page Forms

This renderer also supports multi-page forms using the formio-wizard directive like so.

<formio-wizard src="'https://myapp.form.io/mywizard'"></formio-wizard>

This directive uses Panels within the root of the form to indicate new pages within the form.

Installation

There are several ways to add this library to your application. Each of these installation types are for specific use cases.

Full Installation

Includes: Everything including Angular.js and jQuery.
Usage: Use this installation if your application does not already have Angular and jQuery and you wish to display a single form on a page.
Installation: Place the following within your application.

<link rel="stylesheet" href="https://rawgit.com/formio/ngFormio/master/dist/formio-full.min.css" />
<script src="https://rawgit.com/formio/ngFormio/master/dist/formio-full.min.js"></script>

Complete Installation

Includes: Everything except Angular.js and jQuery
Usage: Use this if you are embedding a form within an application that already has Angular.js and jQuery installed.
Installation: Place the following within your application.

<link rel="stylesheet" href="https://rawgit.com/formio/ngFormio/master/dist/formio-complete.min.css" />
<script src="https://rawgit.com/formio/ngFormio/master/dist/formio-complete.min.js"></script>

Basic Installation: (Bower Installation)

Includes: Only the ngFormio renderer library with no dependencies.
Usage: When you wish to explicitely include all of the dependencies like when you are using Wiredep.
Installation: We recommend using Wiredep for the Basic installation since it will wire up all the dependencies for you. You just need to place the following within your application.

First install the dependency using Bower

bower install --save ng-formio

Then, you can add the following to your application.

<html>
<head>
  <!-- bower:css -->
  <!-- endbower -->
</head>
<body>
  <!-- bower:js -->
  <!-- endbower -->
</body>
</html>

Then run Wiredep to wire it up.

$ node
> require('wiredep')({ src: 'index.html' });

We also recommend using this within a Gulp build process using Wiredep in combination with Gulp UseRef.

Configuration

Once you have this installed, you will now need to add this module within your Angular.js application declaration like so...

app.js

angular.module('yourApp', [
  'formio'
])

Usage

Now that you have the library installed, you can then do the following to add a form to your application.

Create an account on https://form.io
Create a new project.
Create a Form within your project. This will then give you an API url like the following. https://myapp.form.io/myform.
You can then embed this form within your application by providing the following.

<formio src="'https://myapp.form.io/myform'"></formio>

This not only renders the form dyanmically within your application, but also automatically hooks up that form to the API backend that is provided from Form.io.

Enjoy!

The Form.io Team!

ngformio's People

Contributors

Stargazers

Watchers

Forkers

kenifranz headspacemeditation jgabriellima vahidtaslimi 2947721120 assignar johndirek npmcdn-to-unpkg-bot felixcheruiyot taoyuan blackbaud darwino soundarkarunagaran blackbaud-jeremymorgan achampong velchen patrickmorriscpa codeinpeace ashkansk churchdesk jacky-cyber ezing navan7 jazizi heathdutton schad0001 prashant93 douglaselee robertjpayne guillaumesmaha jenifferyingyiwu ricardoferreiraferreira jeanpaulruiz thedmsgroup dim2k2006 sbalay fabiostivanin zhangxb1987 ebpiuzh mosaicstg johnnyfly deshion ashokbharathi izambl travist csini marcoantonionina daorithos sonicos shawnp84 nutellinoit naumen-gp demonrem sura2k poovarasanvasudevan marguslaak maheshsundaramurthy clonardo eiweiss dv336699 dnievas04 webawesomedev zruchala jmona789 elma6394 pkochubey marcosrioj olivbd sbsgroup bawa darabi sirishbitra introproventures moshefi abnnajaf jeffersbaxter petrosuch kamsi millidevx catbakun johan-- inaamhusain annabelo2606 joennlae dhaval96 forkedit askk yuqinbs mykabam krptodr mkipcak i9cn dsetzer pgirala emrahoruc kirshanpal fairhopeweb appsorwebs jhh2004 ajculpeppertfc

ngformio's Issues

Wizard is broken

In some reason wizard "next" button throws error:

vendor.f5d32e3d.js:5 TypeError: Cannot read property '$valid' of undefined
at o.a.isValid (vendor.f5d32e3d.js:23)
at o.a.checkErrors (vendor.f5d32e3d.js:23)
at o.a.next (vendor.f5d32e3d.js:23)
at fn (eval at compile (vendor.f5d32e3d.js:7), :4:203)
at b (vendor.f5d32e3d.js:5)
at e (vendor.f5d32e3d.js:8)
at o.$eval (vendor.f5d32e3d.js:6)
at o.$apply (vendor.f5d32e3d.js:6)
at HTMLAnchorElement. (vendor.f5d32e3d.js:8)
at HTMLAnchorElement.dispatch (vendor.f5d32e3d.js:2)

Week ago it worked perfectly and i haven't done changes during this time.
Angular 1.5, ngFormio, wizard rendering.

Select component does not work when refreshOn is set to Any Changes

In select component, setting the refreshOn property to Any Changes breaks the component behaviour when using JSON or URL as datasource. The component never gets initialised, and does not get populated after changes on other inputs.

I think this maybe caused by these lines of code in file src/components/select.js.

if (settings.refreshOn) {
  if (settings.refreshOn === 'data') {
    $scope.$watch('data', refreshItemsWhenReady, true);
    return; // HERE! Remember this return statement
  }

  $scope.$watch('data.' + settings.refreshOn, refreshItemsWhenReady);
  $scope.$watch('submission.data.' + settings.refreshOn, refreshItemsWhenReady);
}

I think so because above those lines, the refresh items function is defined like this:

$scope.refreshItems = function() {
  return $q.resolve([]);
};

And below those lines, refreshItems is redefined according to the selected datasource:

switch (settings.dataSrc) {
  ...
  case 'json':
    ...
    $scope.refreshItems = function(input, url, append) {
       ...
    }
  case 'url':
  case 'resource':
    ...
    $scope.refreshItems = function(input, newUrl, append) {
      ...
    }
    ...
}

When Any Changes is selected, settings.refreshOn will be 'data'. Because of that, the return in line 258 does not allow $scope.refreshItems to be redefined according to the datasource, producing this unexpected behaviour.

Error: [$injector:modulerr] Failed to instantiate module formio

I am trying to integrate form io in ionic application.

I have installed ngformio using "npm install --save ng-formio". and include dependency in app.js file.Now while running project,
I am getting error "Error: [$injector:modulerr] Failed to instantiate module formio".

DateTime component default value overwrites form data

Codepen for reference: http://codepen.io/blackbaud-jeremymorgan/pen/WogMeM

It seems that the "default" field is always set in the model, whether or not there is a preexisting value.

URL file upload bug and workaround

URL uploading is complaining in current ng-formio version:
"File Upload URL not provided".
Althought url attribute is provided and storage type is "url".

The problem:
$scope.formio is not initialized because src attribute is empty in ng-formio element.

I suspect, problem location is here:
// FOR-71
if (!$scope._src && !$scope.builder) {
$scope.$watch('src', function(src) {
if (!src) {
return;
}
$scope._src = src;
$scope.formio = FormioScope.register($scope, $element, {
form: true,
submission: true
});
});
}

The workaround is to just put something into src attribute value:
<formio form="formFile" src="'something'" submission="submission"></formio>

Populating Data To a Form using (Formio)

Hi everyone ,

I am having this difficulty on rendering the form with its submission data As per instruction on this Site
https://help.form.io/faq/advanced/ iv'e used the method #2 on Populating Data To a Form for me to be able to control the data that will display with form.

$scope.submission = {data: { firstName: ‘Travis’, lastName: ‘Tidwell’ }};

but after i use that method its still not rendering the form with its data that i set ? is this a bug or what ?

please help thanks.
#formio

ngFormio Renderer - Wizard Titles Overlap

is there a way to show the wizard step titles on the left side and the rendered elements on the right side?
I have form step titles that are long and they overlap, making the rendered form look ugly.

i don't want to hack around to move the step titles to the left if there is an option that does it in a cleaner way.

Thanks

No validation messages in survey components nor error highlighting

When a survey has required fields, a general error is shown for the form on submit. But no indication in the survey component. It confuses the users in long forms, because they can not easily identify the error that does not allow them to submit the form.

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

With the commit 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?

Add custom component

Hi
How can I add custom component.
thanks

Select Component does not allow typeahead data to refresh Default Value

Description: When updating a form field where the default value is set, selecting a new item from the typeahead search list does not replace the default value. It is only possible to update the select value when scrolling through the standard dropdown list and clicking an item.

Set up a form that uses the Select Component (Data source URL) and a valid default value.
Navigate to the form, and note that the default value is set
Click on the dropdown, the standard drop down should appear
Type in another valid select option, the typeahead search dropdown appears with results
Choose one of the typeahead dropdown options (either by keyboard or mouse click)
After the option is chosen the typeahead dropdown disappears, but the default value remains

Other aspects to note: This bug does not happen when the source is the JSON file. All other settings of the component are default, except where needed to take in the URL data.

Form rendering

formio rendering using src="'http://localhost:8107/api/forms/1'"(this is api call to json schema of form from DB) from my server is not working.
But if use src="'https://yjjwubnkdmwcedm.form.io/customer'" from Form.io works properly.

formioTranslate translate strings that are typed by the user

Noticed formio is using the filter formioTranslate which is used to translate some hardcoded strings like error strings and what not.

But it's also being used to translate field labels which could be typed by the user himself
<label>{{ component.label | formioTranslate:null:builder }}</label>

That means that if the user adds a new field with the label "Name", it'd be translated to "Nom, Navn, ..." which might doesn't make sense because that's a string typed by the user himself.

Is there a way to fix this?

The way we tried getting around it was by using a decorator to override the formioTranslate filter, but that doesn't completely fix the problem.

Formio still supports Angular1?

I wonder if formio still supports angular1 because after a lot of trial, i still cannot get or shown on the webpage.

I generated a Angular1 project from form.io's website, and I believe this automatically generated project they give me should have all the dependencies, and I just put and in html. It just does not show up.

Regards,
Ziwen

Builder included

Could it be that the client package includes the builder??
//npmcdn.com/ng-formio@latest/dist/formio-complete.js

Drawing from other form controls in custom validation

Hey all,

Just wondering, how would I go about validating fields based on other fields in the same form? Like, for example, having a start time and end time field, how would I validate that the end time comes after the start time?

Add Another button not disabled when using read-only, nor hidden when using hide-components

When using the following parameters when displaying submissions, the Submit button on a form is hidden:

read-only=true
hide-components = ['submit']

It is also disabled when using read-only without using 'hide-components' .

Yet, the Add Another button remains visible when the above parameters are set.

FORMIO - error rendering on changing form object

Hello,
When i try to change the form object by passing a new one, the formio dont render the form properly
Here is a demo :

https://jsfiddle.net/3mvckzcd/2/

You should click the ' Change' button to fire the new object

"Tried to load angular more than once."

Hello!

formio-complete.min.js:53 WARNING: Tried to load angular more than once.

This is my "app":

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <script type="text/javascript" src="//npmcdn.com/ng-formio@latest/dist/formio-complete.min.js"></script>
</head>
<body>
    <div id="main">
        <p>Content.</p>

        <formio style="outline: 2px solid green;" src="'https://gyxqbhairwmxoyw.form.io/contact'"></formio>
        <script type="text/javascript">
            angular.module('formioApp', ['formio']);
            angular.bootstrap(document, ['formioApp']);
        </script>

Access form submission data

I have some save for later functionality I'm trying to implement, so I'm looking for a way to get a hold of the current submission data for a given form.

Right now I pass in an initial data object using the submission attribute on the formio component, which works great to initialize the form. I was hoping that this object would be data bound to and reflect the data the user enters in the form, but that doesn't appear to be the case.

Is there another way to get a handle on the underlying model without actually submitting the form?

Dynamic form creation

How to create a dynamic form as User instead of developer.

I am trying to build a Quiz-Maker application and exploring the option of using "Formio" for this purpose. Please advise if this is a good fit or not a good fit.

"Invalid alias" when submitting a wizard

We tried to play with the formio codepen to check whether the features could be a nice addition to our current project.

What bothered us is that in case of a "wizard" the generated "Submit Form"-button only displays the error message "Invalid alias".
After some messing around we got a local form builder and renderer up and running which displays the same error when trying to submit a wizard via the generated "Submit Form"-button. On another note we found out a "Submit"-button manually added to the wizard's last page submits the form as expected.

Is there a specific event/callback one need to define? What exactly does "Invalid alias" even mean?

Is it possible to create custom fields?

I'm try to create a custom field & not sure how easy/hard/possible it is to do. I'm pretty inexperienced with angular which is probably half my problem.

Can anyone point me in the right direction?

Required file component validation is not working.

We are using the latest ng-formio library.
File component is configured as required field.
But no validation error is occurred when submit button is pressed and file field is empty.

Unauthorized when get Existing Resource Fields

Hi everyone,
I got the error with api get form resource (https://api.form.io/form?type=resource&limit=4294967295&select=_id%2Ctitle%2Cname%2Ccomponents) in my project.
Then I try the formio demo on this page (http://codepen.io/travist/full/xVyMjo/) and get the same error, pls refer image below.

Can anyone tell me the root cause and how to fix that error?

Thanks.

Cannot read property 'baseUrl' of undefined

I am getting this error:

angular.js:14642 TypeError: Cannot read property 'baseUrl' of undefined
at new 228.module.exports.app.config.formioComponentsProvider.register.controller (formio.js:16948)
at Object.instantiate (angular.js:5055)
at $controller (angular.js:10975)
at new 240.module.exports.formioComponents.controller (formio.js:18596)
at Object.invoke (angular.js:5040)
at $controllerInit (angular.js:10960)
at nodeLinkFn (angular.js:9840)
at angular.js:10248
at processQueue (angular.js:17000)
at angular.js:17044

code itself on the line 16946 is
```
case 'resource':
var url = '';
var baseUrl = $scope.options.baseUrl || Formio.getBaseUrl();
//var baseUrl = Formio.getBaseUrl();


$scope.options is undefined
Looking around the code, it has been resolved in many places with code 
`$scope.options = $scope.options || {};`

ng-formio v2.20.3

Min/Max validation not checked for Text Area Component

With text area component, the minimum length and maximum length validations are not being checked on the form. The validation is being checked once I submit but I would of expected it to act similar to the text field where I get a error message under the component.

Repo steps:

Insert Text Area component to a form and set the min/max validations to any number,
With in the form enter text in this new component that is either under the min validation or over the max validations.
No error message appears under the component stating the value is invalid

NOTE - During the submission of the form I will be informed of the invalid form.

form rendering

Can we use form render as stand alone.Please help me out.

<formio> does not show up

I installed and imported all the dependencies

I not only use the full installation method

I put , it just does not show up.

And the console gives me a lot of errors related to the import of all the dependencies, e.g.
1.angular-sanitize.js:602 Uncaught TypeError: angular.module(...).provider(...).info is not a function
2.Error: [$compile:iscp] http://errors.angularjs.org/1.3.13/$compile/iscp?p0=formio&p1=options&p2=%3C
3.agular.js:11607 Error: [$injector:unpr] http://errors.angularjs.org/1.3.13/$injector/unpr?p0=%24animateCssProvider%20%3C-%20%24animateCss%20%3C-%20.item-animation

Select Component Default Values not working for some Data Source Types

The Select Component 'Default Value' setting is not working for some 'Data Source Types'. For example, for the 'Custom' Data Source Type it is not working: https://www.screencast.com/users/willemd2999/folders/Share/media/f5175f28-d7b5-4f63-a36d-98341d1d6a83 For the JSON type it is not working either: https://www.screencast.com/users/willemd2999/folders/Share/media/f61b22c7-737d-4946-ad1e-c30383e2298c and it is also not working for the 'Resource' Data Source Type.

(It does work for the 'Values' Data Source Type: https://www.screencast.com/users/willemd2999/folders/Share/media/9d19b4e6-473e-4b6a-bb43-c1190b640870)

formrender readonly prorperty is not working for custom component

Date range is a custom componet added by me.

You can see day component is readonly but Date range is not.

Checkbox checked by default?

How does one make a checkbox checked by default? I've tried setting defaultValue to true, and it doesn't seem to do the trick?

http://codepen.io/heathdutton/pen/YNBKQN?editors=0010

Form Validation

If there is an error in the form, it throws the Fix following errors. Great, I fix the errors and submit it again with no errors and it still says errors remain.

I think the issue lies in that the form is no longer considered pristine and it doesn't go through the validation again to check the form.

I'm finding it in formio.js in $scope.checkErrors() starting around line 12754 in v2.19.5.

Custom validation does not behave as expected

Plunker for reference: https://plnkr.co/edit/Yd8VSRbSRLojY09MrJhY

I noticed when using the date-time control that the custom validation field errors when using String.replace to evaluate form values. While this does work for a good majority of values in other controls, String.replace will take the Date object and slip it into the custom validation code as-is, unquoted and all. This causes a syntax error when evaluated.

Another issue I noticed, when using scope.data in the custom code instead of the bracket notation, and I will make another issue if it helps with tracking, is that the scope values lag behind what has actually been chosen in the date-time picker. Say that when I load the form and select a date (say 11/18/2016), the custom validation code runs but prints 'undefined'. When I select another date (say 11/19/2016), then 11/18/2016 prints in the console.

Grid not working in a form submission view

I have the following form schema which has a grid component called products

Schema/Form

Submission

{"data":{"dateapplied":"2016-09-14T21:00:00.000Z","bela":"200","age":20,"upload":[],"firstname":"Felix","products":{"products2":[{"name":"One","qty":1,"price":"20"},{"name":"Two","qty":1,"price":"30"},{"name":"Three","qty":10,"price":"50"}]},"lastname":"Cheruiyot"}}

How I'm calling the directive:

<formio-submission form="form" submission="submission"></formio-submission>

Initializing the app

`var formBuilder = angular.module('formApp', ['formio']).run(["$rootScope", 'formioComponents', '$timeout',
function ($rootScope, formioComponents, $timeout) {

        }]);

    formBuilder.controller('FormCtrl', ['$scope', 'formioComponents', '$timeout',
        function ($scope, formioComponents, $timeout) {
            $scope.submission = null;
            $scope.form = null;
            $scope.ticket_id = window.location.pathname.split('/')[3];

            $scope.loadTicket = function () {
                //Fetch workflow data from the server and feed the schema details
                App.remoteGet('/api/v1/tickets/' + $scope.ticket_id, {}, function (res) {
                    $scope.submission = res.form_data;

                    //Add form and append id to it
                    $scope.form = res.schema;
                    $scope.form['_id'] = $scope.ticket_id;

                    $scope.$apply();
                }, function (err) {
                    console.log(err);
                    App.notifyUser('error', 'Error fetching ticket data')
                })
            };
        }])`

Output

Problem

Note the grid is not shown in the above output

select component is not working in ios 10.0 on iphone 5

Hi,

I noticed a strange behaviour of "select" component in iphone 5 having ios 10.0 .
The issue is reproducible in the above configuration only .
For the same will attach the screenshots also .
So kindly help me out in this issue.

onChange event for dropdown

How to use onChange event in ngFormio library. Its available only for js and angular 2, 4. What is the syntax to use onChnage for formio.

js
form.on("change", (change)=>{

});

Date of Birth is getting reduced by 1 day after form submission.

Hi ,
In recent finding , I observed that while submitting the form having datetime component for date of birth the date submitted to the server got reduced by 1 . Why this unusual behaviour ,can someone look into the issue and suggest workaround or a fix.
Form IO version we are using is
"angular-formio": "^2.0.0-rc.3",
Thanks,

Rendering

is it compulsory to have formio account for form rendering. As i have to save generated json from form builder to database

Cancel file upload while still uploading error: Cannot set property 'status' of undefined

If click on X icon while the file upload still running (see img below)

Error:

Uncaught TypeError: Cannot set property 'status' of undefined
    at XMLHttpRequestUpload.

The error is generated here:
https://github.com/formio/ngFormio/blob/master/src/components/file.js#L259

Translation issue

Hello,

from the this commit @abdallamohamed : SHA: f43b4bc
f43b4bc

I have a issue on my custom translation (for exemple in servicetracker app). My translation is
empty like this {}.

updated
The problem is in the src/filters/translate.js : return $translate(text) (promise)

The translate filter doesn't work: {{ "Day" | formioTranslate:null:builder }}

how to translate formio?(i am new to angularjs and web development)

hello it seems to be silly question but
i want to translate formio editor,
i dont see a controller at all.
i findout that there is filter name formiotranslate for example:
{{'Radio Value' | formioTranslate}}
i dont know how to use it to translate editor.
i wrote this in translateor.js
var appp = angular.module('formioApp');
var f = appp.filter(formioTranslate);
f.addLanguage('es', esTranslation);
f.use('es');
var esTranslation = {
'Submit': 'Enviar',
'Language': 'Idioma',
'Translations': 'Traducciones',
'First Name': 'Tu nombre',
'Last Name': 'Apellido',
'Enter your email address': 'Ingrese su dirección de correo electrónico',
'Enter your first name': 'Ponga su primer nombre',
'Enter your last name': 'Ingresa tu apellido',
'Valid Email Address': 'dirección de email válida',
'Please correct all errors before submitting.': 'Por favor, corrija todos los errores antes de enviar.',
'required': '{{field}} es requerido.',
'invalid_email': '{{field}} debe ser un correo electrónico válido.',
'error': 'Por favor, corrija los siguientes errores antes de enviar.'
};
and editor didn't show at all.

Cannot read property 'baseUrl' of undefined

angular.js:14642 TypeError: Cannot read property 'baseUrl' of undefined
at new controller (formio.js:15713)
at Object.invoke (angular.js:5040)
at $controllerInit (angular.js:10960)
at nodeLinkFn (angular.js:9840)
at compositeLinkFn (angular.js:9149)
at compositeLinkFn (angular.js:9152)
at publicLinkFn (angular.js:9014)
at lazyCompilation (angular.js:9405)
at boundTranscludeFn (angular.js:9192)
at controllersBoundTransclude (angular.js:9959)

different line now 15713 :)
there may be more of those...

Update form components issue rendering

Hello, I have a probleme when updating my form with the rendering.
This is the function that update the $rootScope.form
$scope.change = function () { $rootScope.form = {"components":[{"input":true,"tableView":true,"inputType":"number","label":"Numéro point d'analyse","key":"numropointdanalyse","placeholder":"numéro point d'analyse","prefix":"","suffix":"","defaultValue":"","protected":false,"persistent":true,"hidden":false,"clearOnHide":true,"validate":{"required":false,"min":"","max":"","step":"any","integer":"","multiple":"","custom":""},"type":"number","$$hashKey":"object:207","tags":[],"conditional":{"show":"","when":null,"eq":""}},{"input":true,"inputType":"checkbox","tableView":true,"hideLabel":true,"label":"Présence sur le cheminement d'un obstacle non permanent ?","datagridLabel":true,"key":"prsencesurlecheminementdunobstaclenonpermanent","defaultValue":false,"protected":false,"persistent":true,"hidden":false,"name":"","value":"","clearOnHide":true,"validate":{"required":false},"type":"checkbox","$$hashKey":"object:247","tags":[],"conditional":{"show":"","when":null,"eq":""}},{"input":true,"tableView":true,"inputType":"text","inputMask":"","label":"Quantitatif :","key":"quantitatif","placeholder":"Quantitatif","prefix":"","suffix":"","multiple":false,"defaultValue":"","protected":false,"unique":false,"persistent":true,"hidden":false,"clearOnHide":true,"validate":{"required":false,"minLength":"","maxLength":"","pattern":"","custom":"","customPrivate":false},"conditional":{"show":"","when":null,"eq":""},"type":"textfield","$$hashKey":"object:379","tags":[]},{"input":true,"tableView":true,"label":"Notes","key":"message","placeholder":"Ajouter une note","prefix":"","suffix":"","rows":3,"multiple":false,"defaultValue":"","protected":false,"persistent":true,"validate":{"required":false,"minLength":"","maxLength":"","pattern":"","custom":""},"type":"textarea","conditional":{"show":"","when":null,"eq":""},"$$hashKey":"object:19","hidden":false,"wysiwyg":false,"clearOnHide":true,"tags":[]},{"type":"button","theme":"primary","disableOnInvalid":true,"action":"submit","block":false,"rightIcon":"","leftIcon":"","size":"md","key":"submit","tableView":false,"label":"Submit","input":true,"$$hashKey":"object:20"}],"display":"form"} }

Here is my code :
https://jsfiddle.net/ktosxhou/

click in the top button to fire the change event

Wizard submit doesn't fire formSubmit event

As per the api documentation, a form should fire a formSubmit event before it calls the formio services, allowing a client to access and modify the submission before processing takes place or even cancel the event.

Right now the wizard doesn't fire this event at all, which is blocking some of my work. I've put together a fix which I will submit for review shortly.

Survey do not restore state

I added new survey on form, and then I try to open submission, only last value is selected

Validation issue

On the form there is text input field, with no validations.
All data from the form saved in external DB.
In case User input some number in this field and Submit the form, the form submitted with no issues and data successfully collected from the form.
User open the form with saved data. (Data loaded from DB and passed to form)
Previously saved number, is correctly displayed in the text input field.
When User hit Submit button, the validation occurs:
"CC060 must be longer than -1 characters."

It seems the field is going to be validated(even no validation is configured) only if the entered value is numeric.

Please take a look on attached screenshot:

Demo not working

Hi,
it seems the demo is not working correctly after the latest update. If you drag a component onto the builder, the preview is not rendering it any more.

daterange issue

I think you forgot to add comma after yearColumns: 5

```
       yearRange: '20',
```

```
       yearRows: 4,
```

       yearColumns: 5
       minDate: null,
       maxDate: null

How to get form html with component's data?

I using ngformio to generate form for user input data. I want to display form content with data in email, so i need to get form content in html include component's data. But when user submit form the html content i retrieve only form html without data. So how can i get form content in html with data when form submited. Thanks alot!