formio / react Goto Github PK
View Code? Open in Web Editor NEWJSON powered forms for React.js
Home Page: https://form.io
License: MIT License
JSON powered forms for React.js
Home Page: https://form.io
License: MIT License
Expected result
component Formio for react should run fine on react 16
Actual result
Formio relies on createClass not present in react 16, impossible to embed the forms generated in a new React 16 app.
I use FormBuilder, as:
render() {
return (
<div id="content" className="app-content" role="main">
<div className="wrapper-md">
<FormBuilder
form={{ display: 'form' }}
onChange={(schema) => this.onChangeFormBuilder(schema)}
/>
</div>
</div>
);
}
When I move to another component, it has error:
How can I fixed it ?
Hi,
I’m using Form.io for a project at work, and my team and I would like to keep using Form.io as well as being able to upgrade our react version.
I’m currently working on a POC to see what changes are necessary to make Form.io compatible. I’ll send a pull request as soon as I have something stable!
I didn't see any similar, ongoing projects, but please let me know if someone's currently working on the same subject. Thanks!
I couldn't find any information for react on how to use the custom component, any hint?
./node_modules/react-formio/lib/components/FormComponents/address.js
node_modules/react-formio/lib/components/FormComponents/address.js:25
22 |
23 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
24 |
25 | module.exports = _react2.default.createClass({
26 | displayName: 'Address',
27 | mixins: [_valueMixin2.default, _selectMixin2.default, _componentMixin2.default],
28 | getTextField: function getTextField() {
I was attempting to compile with browserify a run this on the client side. The compilation goes fine, but when I attempt to render the component I get this error:
[Error] TypeError: undefined is not an object (evaluating '_reactRouter.propTypes.routerContext')
(anonymous function) (application.js:100423)
s (application.js:1:259)
(anonymous function) (application.js:1:307)
(anonymous function) (application.js:18648)
s (application.js:1:259)
(anonymous function) (application.js:1:307)
(anonymous function) (application.js:18668)
s (application.js:1:259)
(anonymous function) (application.js:1:307)
(anonymous function) (application.js:17687)
s (application.js:1:259)
(anonymous function) (application.js:1:307)
(anonymous function) (application.js:18013)
s (application.js:1:259)
(anonymous function) (application.js:1:307)
(anonymous function) (application.js:17633)
s (application.js:1:259)
(anonymous function) (application.js:1:307)
(anonymous function) (application.js:11)
(anonymous function) (application.js:46)
s (application.js:1:259)
e (application.js:1:427)
Global Code (application.js:1:444)
Hi, right now we are exploring the possibility to add form.io into our app, but we need to set the form endpoint dynamically (based on some id) within out client side application, and we were wondering if it is posible set the form endpoint or action in the client side app using this library?
If use layout component, when edit component inner the layout. Parent object don't has editComponent method.
How can I render a "wizard" with the React library? Thanks.
Looks like the onElementRender
callback takes two parameters: the Form.IO instance and the element. Also, the documentation should state that the onElementRender
handler must return the element to render (if it does not return anything, the form does not render).
Hello,
The "onFormLoad" event is not firing. Here is how i use the "Formio" react component:
<Formio submission={this.state.entityDetailViewModel.get('entityObject').toJSON()} form={JSON.parse(this.state.entityDetailViewModel.get('form'))} onFormSubmit={this.onFormSubmit} />
Goo days, there wiil be a support of tabs ??
The modules are very functional, but has no support of Tabs, it hard to use form builder with no tabs in every version react,ng2, and angularjs
When running form.io the server side fails with following:
/home/tuomjarv/workspace/emedi/kusote/node_modules/formiojs/build/formio.pdf.js:182
window.addEventListener('message', function (event) {
^
ReferenceError: window is not defined
at Object.<anonymous> (.../node_modules/formiojs/build/formio.pdf.js:182:1)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (.../node_modules/formiojs/build/formio.full.js:11:16)
at Module._compile (module.js:570:32)
Hello,
Im using the localhost react-formio mode and i want to use the file upload on my form to upload pictures to localhost wisdom db.
So when i use the the interface of formio to add a picture,it works without problem,but when i try to use it on my react project the form does not appear and i got this error on my browser console:
Sorry for my bad english.
Hello,
I have problems integrating multiple forms on one page. I have different
<Form key={somekey1}
src={"https://my.form.io/myform"}
submission={this.props.file.submission}
onChange={(s) => this.onChange(s,'mainform')} />
<Form key={somekey2}
src={"https://my.form.io/addform"}
submission={this.props.file.submissionForm1}
onChange={(s) => this.onChange(s,'addform1')} />
<Form key={somekey3}
src={"https://my.form.io/addform"}
submission={this.props.file.submissionForm2}
onChange={(s) => this.onChange(s,'addform2')} />
Are multiple forms on the same page supported anyway?
Thanks
Harald
more info in PR #92
Hi, it seems like the refreshOn only works once.
I have a dropdown that loads from a URL and I have it set up with refreshOn to refresh when another dropdown changes.
This only happens once, when I change the second dropdown a second time it doesn't refresh anymore.
Any thoughts? maybe I'm missing a setting or something to refresh multiple times instead of one?
Thanks in advance,
Juan
hi, i'm working with this library in a webpack application, but i'm getting these warnings:
Warning: React.__spread is deprecated and should not be used. Use Object.assign directly or another helper function with similar semantics. You may be seeing this warning due to your compiler. See https://fb.me/react-spread-deprecation for more details.
also i'm getting this in webpack:
WARNING in ./~/react-formio/dist/Formio.js
Critical dependencies: This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
@ ./~/react-formio/dist/Formio.js 343:501-508
Al so, when using a date component in form.io, the react component associated with the date component does not have any styles.
Does the React implementation support/provide a Grid component to view submisions the way that the AngularJS implementation does?
If so is there an example of how to specify/use this Grid component?
Hi guys!
I am doing some tests with formio
libraries. So far I was able to encapsulate the ngFormBuilder
inside a react component for a react application and I am using react-formio
to render the forms from the json schemas.
I noticed that the address
component is not making calls to the google maps api. It is working on ngFormio
though... I Download both of the examples and ran then locally.
I also noticed that the doSearch
method inside the address
component is responsible for the api call but it is not being called anywhere as it can be seen here:
Will this feature be implemented anytime soon? Would it be ok to submit a pull request?
Thanks!
Hi, i'm using this library but i'm getting this error describe above
this is the JSON that Form.io is generating:
{
"_id":"577422c86eb8a901003f6401",
"modified":"2016-06-30T21:18:36.294Z",
"title":"Register Pacient Form",
"display":"form",
"type":"form",
"action":"https://potatoes.com/registerpacient",
"name":"registerPacientForm",
"path":"registerpacient",
"project":"57741e776eb8a901003f63ed",
"created":"2016-06-29T19:34:32.215Z",
"components":[
{
"conditional":{
"eq":"",
"when":null,
"show":null
},
"type":"htmlelement",
"content":"Pacient Registration Form",
"className":"delta",
"attrs":[
{
"value":"",
"attr":""
}
],
"tag":"h1",
"input":false
},
{
"conditional":{
"eq":"",
"when":null,
"show":null
},
"type":"htmlelement",
"content":"",
"className":"",
"attrs":[
{
"value":"",
"attr":""
}
],
"tag":"div",
"input":false
},
{
"conditional":{
"eq":"",
"when":null,
"show":null
},
"type":"fieldset",
"components":[
{
"isNew":false,
"conditional":{
"eq":"",
"when":null,
"show":null
},
"type":"columns",
"columns":[
{
"components":[
{
"conditional":{
"eq":"",
"when":null,
"show":null
},
"type":"datetime",
"validate":{
"custom":"",
"required":true
},
"persistent":true,
"protected":false,
"timePicker":{
"arrowkeys":true,
"mousewheel":true,
"readonlyInput":false,
"showMeridian":true,
"minuteStep":1,
"hourStep":1
},
"datePicker":{
"datepickerMode":"day",
"yearRange":"20",
"maxMode":"year",
"minMode":"day",
"initDate":"",
"startingDay":0,
"showWeeks":true
},
"datepickerMode":"day",
"enableTime":false,
"enableDate":true,
"format":"yyyy-MM-dd",
"placeholder":"Today's Date",
"key":"todaysDate",
"label":"Today's Date",
"tableView":true,
"input":true
}
]
},
{
"components":[
]
}
],
"input":false
}
],
"legend":"",
"tableView":true,
"input":false
},
{
"conditional":{
"eq":"",
"when":null,
"show":null
},
"type":"fieldset",
"components":[
{
"isNew":false,
"type":"textfield",
"conditional":{
"eq":"",
"when":null,
"show":null
},
"validate":{
"customPrivate":false,
"custom":"",
"pattern":"",
"maxLength":"",
"minLength":"",
"required":true
},
"persistent":true,
"unique":false,
"protected":false,
"defaultValue":"",
"multiple":false,
"suffix":"",
"prefix":"",
"placeholder":"Patient Name",
"key":"patientName",
"label":"Patient Name",
"inputMask":"",
"inputType":"text",
"tableView":true,
"input":true
},
{
"isNew":false,
"conditional":{
"eq":"",
"when":null,
"show":null
},
"type":"columns",
"columns":[
{
"components":[
{
"type":"textfield",
"conditional":{
"eq":"",
"when":null,
"show":null
},
"validate":{
"customPrivate":false,
"custom":"",
"pattern":"",
"maxLength":"",
"minLength":"",
"required":true
},
"persistent":true,
"unique":false,
"protected":false,
"defaultValue":"",
"multiple":false,
"suffix":"",
"prefix":"",
"placeholder":"Social Security Number",
"key":"socialSecurityNumber",
"label":"Social Security Number",
"inputMask":"999-999-999",
"inputType":"text",
"tableView":true,
"input":true
}
]
},
{
"components":[
{
"conditional":{
"eq":"",
"when":null,
"show":null
},
"type":"columns",
"columns":[
{
"components":[
{
"conditional":{
"eq":"",
"when":null,
"show":null
},
"type":"datetime",
"validate":{
"custom":"",
"required":true
},
"persistent":true,
"protected":false,
"timePicker":{
"arrowkeys":true,
"mousewheel":true,
"readonlyInput":false,
"showMeridian":true,
"minuteStep":1,
"hourStep":1
},
"datePicker":{
"datepickerMode":"day",
"yearRange":"20",
"maxMode":"year",
"minMode":"day",
"initDate":"",
"startingDay":0,
"showWeeks":true
},
"datepickerMode":"day",
"enableTime":false,
"enableDate":true,
"format":"yyyy-MM-dd",
"placeholder":"Date of Birth",
"key":"dateofBirth",
"label":"Date of Birth",
"tableView":true,
"input":true
}
]
},
{
"components":[
{
"conditional":{
"eq":"",
"when":null,
"show":null
},
"type":"number",
"validate":{
"custom":"",
"multiple":"",
"integer":"",
"step":"1",
"max":"",
"min":"",
"required":true
},
"persistent":true,
"protected":false,
"defaultValue":0,
"suffix":"",
"prefix":"",
"placeholder":"Age",
"key":"age",
"label":"Age",
"inputType":"number",
"tableView":true,
"input":true
}
]
}
],
"input":false
}
]
}
],
"input":false
},
{
"input":false,
"columns":[
{
"components":[
{
"input":true,
"tableView":true,
"inputType":"text",
"inputMask":"",
"label":"Address",
"key":"address",
"placeholder":"Address",
"prefix":"",
"suffix":"",
"multiple":false,
"defaultValue":"",
"protected":false,
"unique":false,
"persistent":true,
"validate":{
"required":true,
"minLength":"",
"maxLength":"",
"pattern":"",
"custom":"",
"customPrivate":false
},
"conditional":{
"show":null,
"when":null,
"eq":""
},
"type":"textfield"
}
]
},
{
"components":[
{
"input":false,
"columns":[
{
"components":[
{
"input":true,
"tableView":true,
"inputType":"text",
"inputMask":"",
"label":"Apartment Number",
"key":"apartmentNumber",
"placeholder":"Apartment Number",
"prefix":"",
"suffix":"",
"multiple":false,
"defaultValue":"",
"protected":false,
"unique":false,
"persistent":true,
"validate":{
"required":false,
"minLength":"",
"maxLength":"",
"pattern":"",
"custom":"",
"customPrivate":false
},
"conditional":{
"show":null,
"when":null,
"eq":""
},
"type":"textfield"
}
]
},
{
"components":[
]
}
],
"type":"columns",
"conditional":{
"show":null,
"when":null,
"eq":""
}
}
]
}
],
"type":"columns",
"conditional":{
"show":null,
"when":null,
"eq":""
}
},
{
"input":false,
"columns":[
{
"components":[
{
"input":true,
"tableView":true,
"inputType":"text",
"inputMask":"",
"label":"City",
"key":"city",
"placeholder":"City",
"prefix":"",
"suffix":"",
"multiple":false,
"defaultValue":"",
"protected":false,
"unique":false,
"persistent":true,
"validate":{
"required":true,
"minLength":"",
"maxLength":"",
"pattern":"",
"custom":"",
"customPrivate":false
},
"conditional":{
"show":null,
"when":null,
"eq":""
},
"type":"textfield"
}
]
},
{
"components":[
{
"input":false,
"columns":[
{
"components":[
{
"input":true,
"tableView":true,
"inputType":"text",
"inputMask":"",
"label":"State",
"key":"state",
"placeholder":"State",
"prefix":"",
"suffix":"",
"multiple":false,
"defaultValue":"",
"protected":false,
"unique":false,
"persistent":true,
"validate":{
"required":true,
"minLength":"",
"maxLength":"",
"pattern":"",
"custom":"",
"customPrivate":false
},
"conditional":{
"show":null,
"when":null,
"eq":""
},
"type":"textfield"
}
]
},
{
"components":[
{
"conditional":{
"eq":"",
"when":null,
"show":null
},
"type":"number",
"validate":{
"custom":"",
"multiple":"",
"integer":"",
"step":"any",
"max":5,
"min":5,
"required":true
},
"persistent":true,
"protected":false,
"defaultValue":0,
"suffix":"",
"prefix":"",
"placeholder":"Zip",
"key":"zip",
"label":"Zip",
"inputType":"number",
"tableView":true,
"input":true
}
]
}
],
"type":"columns",
"conditional":{
"show":null,
"when":null,
"eq":""
}
}
]
}
],
"type":"columns",
"conditional":{
"show":null,
"when":null,
"eq":""
}
}
],
"legend":"Patient's basic information",
"tableView":true,
"input":false
},
{
"customClass":"button button--default",
"conditional":{
"eq":"",
"when":null,
"show":null
},
"type":"button",
"theme":"primary",
"disableOnInvalid":true,
"action":"submit",
"block":false,
"rightIcon":"",
"leftIcon":"",
"size":"md",
"key":"submit",
"tableView":false,
"label":"Submit",
"input":true
}
],
"owner":"56df54d0acb1fa0100471847",
"submissionAccess":[
{
"type":"create_all",
"roles":[
"57741e776eb8a901003f63f0"
]
},
{
"type":"read_all",
"roles":[
]
},
{
"type":"update_all",
"roles":[
]
},
{
"type":"delete_all",
"roles":[
]
},
{
"type":"create_own",
"roles":[
]
},
{
"type":"read_own",
"roles":[
]
},
{
"type":"update_own",
"roles":[
]
},
{
"type":"delete_own",
"roles":[
]
}
],
"access":[
{
"type":"read_all",
"roles":[
"57741e776eb8a901003f63ee",
"57741e776eb8a901003f63ef",
"57741e776eb8a901003f63f0"
]
}
],
"tags":[
]
}
This is not a big issue just worth mentioning as is easy to fix
The Task app
https://portal.form.io/#/project/57fd3190581e59007c155554/local
description to run app locally is confusing (at least it was for me)
No mention of how to install gulp as for example is mentioned
https://github.com/formio/formio-app-basic
Cheers
Hello again! Thx for replying to #93 and merging #92.
Unfortunately these changes took no effect because PR was merged after new lodash imports were created in code:(
i've prepared new PR #95 to fix this again.
I've also tried to add some linting rules like http://eslint.org/docs/rules/no-restricted-imports, to automatically prevent creating such imports in the future. But it looks like that eslint currently in broken state:( And it is not a part of the project build
When I change or submit Form, it was ok
But how can I re-render value on UI for them, I try to set defaultValue, it was good for another component, but with Radio and Checkbox, it was not ok, although I try in different ways.
Screen Record:
Anybody can help me, thank you so much!
Created an empty project using create-react-app, and added FormBuilder. Dragging Text Area throws this error:
utils.js:138 An error occured within custom function for wysiwyg TypeError: instance.wysiwygDefault is not a function
Sample code:
import React, { Component } from 'react';
import {FormBuilder} from 'react-formio';
class App extends Component {
render() {
return (
<div className="App">
<FormBuilder
form={{ display: 'form' }}
</div>
);
}
}
export default App;
Hello,
Can you please guide me how to implement this on my react project, I'm confused as its mentioned only few lines to get a formbuilder, but i need to customize the whole components inside project and react-app-starterkit isn't working as its trowing module not found error.
Thanks in Advance
Harshith
When trying to import react-formio:
import Formio from 'react-formio';
following error occures:
C:\Users\kala\workspace\react_fullstack\node_modules\formiojs\node_modules\whatwg-fetch\fetch.js:330
})();
^
ReferenceError: self is not defined
at C:\Users\kala\workspace\react_fullstack\node_modules\formiojs\node_modules\whatwg-fetch\fetch.js:4:7
at Object. (C:\Users\kala\workspace\react_fullstack\node_modules\formiojs\node_modules\whatwg-fetch\fetch.js:330:3)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at Object. (C:\Users\kala\workspace\react_fullstack\node_modules\formiojs\src\formio.js:9:1)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at Object. (C:\Users\kala\workspace\react_fullstack\node_modules\react-formio\lib\Formio.js:4:16)
Created an empty project using create-react-app, and added FormBuilder with a simple console.log event for schema changes. After 4 changes, the event stops triggering.
Sample code:
import React, { Component } from 'react';
import {FormBuilder} from 'react-formio';
class App extends Component {
render() {
return (
<div className="App">
<FormBuilder
form={{ display: 'form' }}
onChange={(schema) => console.log(schema)} />
</div>
);
}
}
export default App;
I'm having this issue where every component in the form is getting the input-group class, and that class is just for elements with prefix or sufix (or both), and when using bootstrap, the style is messed up.
Build fails, these dependencies are seem to be missing:
"react-widgets" and "formiojs"
I want to build a quiz-maker app in which users create dynamic forms instead of developers.
Is this feasible using formio?
Reset action does not clear any field.
Im getting following error when I execute npm run serve
ERROR in .//react-formio/lib/modules/auth/containers/Login.js/react-formio/lib/modules/auth/containers/Login.js 11:14-51
Module not found: Error: Can't resolve '../../../components/Formio' in '/Users/activemac05/Desktop/main-project/react-app-starterkit/node_modules/react-formio/lib/modules/auth/containers'
@ ./
@ .//react-formio/lib/modules/auth/routes.js/react-formio/lib/modules/auth/index.js
@ ./
@ ./src/app/auth/index.js
@ ./src/index.js
@ multi webpack/hot/dev-server webpack-hot-middleware/client ./src/index
ERROR in .//react-formio/lib/modules/auth/containers/Register.js/react-formio/lib/modules/auth/containers/Register.js 11:14-51
Module not found: Error: Can't resolve '../../../components/Formio' in '/Users/activemac05/Desktop/main-project/react-app-starterkit/node_modules/react-formio/lib/modules/auth/containers'
@ ./
@ .//react-formio/lib/modules/auth/routes.js/react-formio/lib/modules/auth/index.js
@ ./
@ ./src/app/auth/index.js
@ ./src/index.js
@ multi webpack/hot/dev-server webpack-hot-middleware/client ./src/index
ERROR in .//react-formio/lib/modules/resource/containers/Edit.js/react-formio/lib/modules/resource/containers/Edit.js 11:14-51
Module not found: Error: Can't resolve '../../../components/Formio' in '/Users/activemac05/Desktop/main-project/react-app-starterkit/node_modules/react-formio/lib/modules/resource/containers'
@ ./
@ .//react-formio/lib/modules/resource/routes.js/react-formio/lib/modules/resource/index.js
@ ./
@ ./src/app/resources/activity/index.js
@ ./src/app/resources/index.js
@ ./src/index.js
@ multi webpack/hot/dev-server webpack-hot-middleware/client ./src/index
ERROR in .//react-formio/lib/modules/resource/containers/View.js/react-formio/lib/modules/resource/containers/View.js 11:14-51
Module not found: Error: Can't resolve '../../../components/Formio' in '/Users/activemac05/Desktop/main-project/react-app-starterkit/node_modules/react-formio/lib/modules/resource/containers'
@ ./
@ .//react-formio/lib/modules/resource/routes.js/react-formio/lib/modules/resource/index.js
@ ./
@ ./src/app/resources/activity/index.js
@ ./src/app/resources/index.js
@ ./src/index.js
@ multi webpack/hot/dev-server webpack-hot-middleware/client ./src/index
ERROR in .//react-formio/lib/modules/resource/containers/Create.js/react-formio/lib/modules/resource/containers/Create.js 11:14-51
Module not found: Error: Can't resolve '../../../components/Formio' in '/Users/activemac05/Desktop/main-project/react-app-starterkit/node_modules/react-formio/lib/modules/resource/containers'
@ ./
@ .//react-formio/lib/modules/resource/routes.js/react-formio/lib/modules/resource/index.js
@ ./
@ ./src/app/resources/activity/index.js
@ ./src/app/resources/index.js
@ ./src/index.js
@ multi webpack/hot/dev-server webpack-hot-middleware/client ./src/index
Hello, is there a way to initialize a form with a JSON data object?
I would like to do something like this:
<Form form={schema} data={initialData} />
Thanks in advance,
Juan
Hey, I'm hoping someone is about to help me on an issue i'm seeing in microsoft edge.
I included formio react and setup a form and it works a treat everywhere except edge (even IE11)
This issue is causing the client site to render a white page with no errors in the console. However the below is what the dev environment gives me.
I would really appreciate a quick response if at all possible
Thanks!
Example, I have code:
class CreateForm extends Component {
constructor() {
super();
this.state = {
components: {},
name: '',
}
}
...
render () {
return (
<div>
...
<FormBuilder onChangeFormBuilder={this.onChangeFormBuilder} />
...
</div>
)
}
Anytime 'name' or 'components' was changed, FormBuilder is reset
We are seeing warnings from bluebird about: "a promise was created in a handler but was not returned from it". We dove into the formio code a bit and it looks like the chained then() are missing returns in some cases possibly (createForm may be the main culprit, setSubmission). Then back up in react-formio, returning formio from the createForm then() before initializeFormio adds an additional then() seemed to remove the last warning. We are not familiar with the code obviously though.
The main issue though is that when we initially set the form through the form prop on the Formio component, it shows fine, but then if we assign a new form it doesn't show the updated form. If we assign a another new (3rd) form then the 2nd form shows up. Its like it ends up 1 form behind. We suspect this is related to the unresolved promises but not sure.
ReactDOM.render(<Formio src="https://someFormId.form.io/user/login"></Formio> , document.getElementById('app') );
This only renders a single form.
Is there a way to redirect/navigate from one form to another in a react app?
When I re-render form of formio, it looks:
http://g.recordit.co/ZOX9ZDsAgw.gif
How can I make it smoother, or turn off loading when re-render
A Select component using CUSTOM data + RefreshOn Anychange (data) fails with error
setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.
Reproduction : Using an existing form
values=[{ label: '1', name:'one'}]
Hey team,
As per my requirement, I need to add headers in my post request. How can I do it?
I am giving this command npm install react-formio but I get this warning and the form is not able to render
/react-formio/dist/build/Formio.js/react-formio/dist/build/Formio.js 1:479-486
Critical dependencies:
1:479-486 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
@ ./
Hi :) ,
I got that error when I installed react-formio:
"Uncaught TypeError: Cannot read property 'routerContext' of undefined"
The error is in webpack:///./~/redux-view/lib/ReduxView.js
My package.json dependencies are:
"dependencies": {
"react": "^15.3.2",
"react-dom": "^15.3.2",
"react-formio": "^0.10.11",
"react-redux": "^4.4.5",
"react-router": "^2.8.1",
"react-router-redux": "^4.0.6",
"redux": "^3.6.0"
}
And node version is v6.4.0
Thanks
Hey, one last thing (Hopefully), how do i add the styles for the react widgets components, is there an easy way, what would be the steps there?
The project I'm working on is experiencing this warning. It doesn't seem to cause any actual problem except clogging up the console with warnings that don't contribute any useful information.
Preconditions:
This could potentially be a problem in formio.js.
If I am understanding correctly, rendering this Formio
component results in a call to createForm
inside of formio.js's formio.form.js. This code looks like the following:
createForm(form) {
/**
* {@link BaseComponent.component}
*/
if (this.component) {
this.component.components = form.components;
}
else {
this.component = form;
}
return this.onFormBuild = this.render().then(() => {
this.formReadyResolve();
this.onFormBuild = null;
this.setSubmission(this._submission);
},
(err) => this.formReadyReject(err)
).catch(
(err) => this.formReadyReject(err)
);
}
I think this.render()
indirectly results in a call to setValue on the Select which is fine the first time since no value is selected yet. However in the callback for render there is also a call to this.setSubmission(this._submission)
which also indirectly results in a call to setValue which is trying to set the selected value to something that was already selected when rendering which results in this warning showing up.
Any suggestions what the cleanest way to fix this could be? Is there anything else I should be checking?
Hi,
I am trying to change one language to another language using option field in the Form io with particular data. onclicking the button am trying to change hindi language to malayalam. But Formio component is not rendering
Problem : Unable to change the language.
Node version : v10.3.0
Npm : 6.1.0
Form io : 1.17.1
import * as axios from "axios";
import React, { Component } from "react";
import { Form } from "react-formio";
import { routes } from "../urls";
class MyForm extends Component {
constructor(props) {
super(props);
this.state = {
form: undefined,
admin: true,
opts: {
readOnly: false,
language: "fr",
i18n: {
en: {
Email: "ईमेल",
Number: "संख्या",
Submit: "जमा करें"
},
fr: {
Email: "ഇമെയിൽ",
Number: "സംഖ്യ",
Submit: "Submit"
}
}
}
};
this.handleSubmitFunction = this.handleSubmitFunction.bind(this);
this.convertLanguage = this.convertLanguage.bind(this);
}
componentDidMount() {
let components = {
components: [
{
unique: false,
suffix: "",
conditional: {
show: "",
when: null,
eq: ""
},
hidden: false,
clearOnHide: true,
defaultValue: "",
tableView: true,
label: "Email",
protected: false,
placeholder: "",
properties: {
"": ""
},
kickbox: {
enabled: false
},
type: "email",
hideLabel: false,
prefix: "",
tags: ["admin"],
input: true,
persistent: true,
inputType: "email",
key: "email",
labelPosition: "top"
},
{
suffix: "",
properties: {
"": ""
},
hidden: false,
lockKey: true,
clearOnHide: true,
defaultValue: "",
validate: {
step: "any",
integer: "",
multiple: "",
required: false,
max: "",
min: "",
custom: ""
},
tableView: true,
label: "Number",
protected: false,
placeholder: "",
conditional: {
show: "",
when: null,
eq: ""
},
type: "number",
hideLabel: false,
prefix: "",
tags: ["print", "admin"],
input: true,
persistent: true,
inputType: "number",
key: "number",
labelPosition: "top"
},
{
type: "button",
label: "submit",
action: "submit",
theme: "primary"
}
]
};
this.setState({ form: components });
}
convertLanguage(e) {
var form = { ...this.state.form };
form.language = "en";
var opts = { ...this.state.opts };
opts.language = "en";
this.setState({ form });
}
render() {
return (
<div>
<input
type="choice"
onChange={this.convertLanguage}
name="language"
value="fr"
/>
<Form
onSubmit={this.handleSubmitFunction}
form={this.state.form}
options={this.state.opts}
/>
</div>
);
}
}
export default MyFrom;
Hi there! The latest react-router release (v4.0.0-beta.2) is not exporting propTypes in index.js anymore. So now this line of code is broken, and whole react-formio library cannot be required correctly. So i guess you should fix your package.json file or migrate to the latest react router version.
Survey component is allowing you to mark many options on the same row.
It is currently trying to access a property from a variable that should be an object though it is actually a string...
This was tested on the https://github.com/formio/react-example project.
Is this bug known? Is this fix on the roadmap? I might be of some help, maybe even submit a Pull Request.
Awesome jobs folks, I think it has a lot of potential as an enterprise tool.
The select component values can be retrieved from a URL, but credentials are not sent during the request and if the values are behind some authentication it fails.
Is it possible to enable a "Credentials" checkmark at the form/component level to enable the 'credentials' flag on the request?
Further in the future maybe an Authentication option to specify more properties.
Thanks!
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.