Customizable JSON Schema-based forms with React, Angular and Vue support out of the box.

Last update: Jun 25, 2022

JSON Forms - More Forms. Less Code

Complex forms in the blink of an eye

Documentation

Please see the official JSON Forms website, jsonforms.io, for documentation, examples and API references.

Getting started

  1. Clone the seed app with git clone https://github.com/eclipsesource/jsonforms-react-seed.git
  2. Install dependencies with npm ci (or npm install when using an older version)
  3. Run the app with npm run start

For more info about the seed app, please see the corresponding README file of the seed repo. For a more detailed tutorial about the usage of JSON Forms, please see this tutorial.

Upgrading to JSON Forms 3.0 Alpha

With version 3.0 of JSON Forms we removed json-schema-ref-parser from the core package. This change only affects users of the React variant (Vue and Angular are not affected) and even for React only a few users will need to adjust their code. To avoid issues and for more information, please have a look at our migration guide.

Feedback, Help and Support

If you encounter any problems feel free to open an issue on the repo. For questions and discussions please use the JSON Forms board. You can also reach us via email. In addition, EclipseSource also offers professional support for JSON Forms.

Developers Documentation

First time setup

  • Install node.js (only Node 14 and npm 6 is currently supported)
  • Clone this repository
  • Install dependencies: npm ci
  • Hook up dependencies between packages: npm run init

Build & Testing

  • Build (all packages): npm run build
  • Test (all packages): npm run test
  • Clean (delete dist folder of all packages): npm run clean
  • Run React Vanilla examples: cd packages/vanilla && npm run dev
  • Run React Material examples: cd packages/material && npm run dev
  • Run Angular Material examples: cd packages/angular-material && npm run dev
  • Run Vue Vanilla dev setup: cd packages/vue/vue-vanilla && npm run serve

Dependency & Release management

For more info about how we handle dependencies and releases in the JSON Forms project, please see our Developer Documentation wiki page.

Continuous Integration

The JSON Forms project is built and tested via Github actions on Linux, Mac and Windows. Coverage is documented by Coveralls.

Current status: Build status Coverage Status

License

The JSON Forms project is licensed under the MIT License. See the LICENSE file for more information.

Migration

See our migration guide when updating JSON Forms.

GitHub

https://github.com/eclipsesource/jsonforms
Comments
  • 1. Failed to compile

    After updating to the last version, I get when server starts:

    C:/pantheon/workspace14/JSONForms/node_modules/@jsonforms/react/lib/DispatchCell.d.ts
    TypeScript error in C:/pantheon/workspace14/JSONForms/node_modules/@jsonforms/react/lib/DispatchCell.d.ts(9,58):
    Namespace '"C:/pantheon/workspace14/JSONForms/node_modules/@types/react-redux/index"' has no exported member 'ConnectedComponentClass'.  TS2694
    
         7 |     render(): JSX.Element;
         8 | }
      >  9 | export declare const DispatchCell: import("react-redux").ConnectedComponentClass<typeof Dispatch, Pick<DispatchCellProps, never> & OwnPropsOfCell>;
           |                                                          ^
        10 | export {};
    

    Screenshots image

    Used Setup:

    • OS: Windows
    • IDE/Text Editor: Idea
    • Framework: react
    • RendererSet: material

    Additional context

    dependencies": {
        "@jsonforms/core": "^2.3.1",
        "@jsonforms/examples": "^2.3.1",
        "@jsonforms/material-renderers": "^2.3.1",
        "@jsonforms/react": "^2.3.1",
        "@material-ui/core": "^4.3.3",
        "@material-ui/icons": "^4.2.1",
        "brace": "^0.11.1",
        "font-awesome": "^4.7.0",
        "material-ui-dropzone": "^2.4.5",
        "primeicons": "^2.0.0",
        "primereact": "^3.3.2",
        "prop-types": "^15.7.2",
        "react": "^16.8.6",
        "react-ace": "^8.0.0",
        "react-dom": "^16.8.6",
        "react-helmet": "^5.2.0",
        "react-redux": "^6.0.0",
        "react-select": "^3.0.8",
        "react-swipeable-views": "^0.13.3",
        "styled-components": "^4.2.0",
        "typescript": "^3.6.4"
      },
    
    Reviewed by tujger at 2019-11-05 15:37
  • 2. Horizontal and Vertical Layout with arrays by registering a UI schema

    Hello I am trying to go through this documentation - https://jsonforms.io/docs/providing-uischemas I am trying to customize my array elements by using horizontal layouts and vertical layout. I get no data in the component. How do I pass data in the component?

    This is the component code from the document

    import { JsonForms } from '@jsonforms/react';
    import * as _ from 'lodash';
    import * as React from 'react';
    
    export const Playground =
      ({ data, path, schema, onAdd, uischema, findUISchema }) => {
    
        const controlElement = uischema as ControlElement;
        const resolvedSchema = Resolve.schema(schema, `${controlElement.scope}/items`);
    
        return (
          <fieldset>
            <legend>My Control</legend>
            <div>
              {
                data ? _.range(0, data.length).map((index) => {
    
                  const uischema = findUISchema(resolvedSchema, controlElement.scope, path);
                  const childPath = composePaths(path, `${index}`);
    
                  return (
                    <JsonForms
                      schema={resolvedSchema}
                      uischema={uischema}
                      path={childPath}
                      key={childPath}
                    />
                  );
                }) : <p>No data</p>
              }
            </div>
          </fieldset>
        );
      };
    
    my store- 
    store.dispatch(Actions.registerUISchema(
      (jsonSchema, schemaPath) => {
        return schemaPath === '#/properties/clients' ? 2 : NOT_APPLICABLE;
      },
      {
        type: 'VerticalLayout',
        elements: [
          {
            type: 'Control',
            scope: '#/properties/clients/items/properties/firstName'
          },
          {
            type: 'Control',
            scope: '#/properties/clients/items/properties/firstName'
          }
        ]
      }
    ));
    
    
    my schema 
     const schema = {
      'type': 'object',
      'properties': {
        'clients': {
          'type': 'array',
          'items': {
            'type': 'object',
            'required': [
              'firstName'
            ],
            'properties': {
              'Client ID': {
                'type': 'string',
                'title': 'Service to Client'
              },
              'startDate': {
                'type': 'string',
                'title': 'Start Date',
                'format': 'date'
              },
              'endDate': {
                'type': 'string',
                'title': 'End Date',
                'format': 'date'
              },
              'firstName': {
                'type': 'string',
                'title': 'First name'
              },
              'middleName': {
                'type': 'string',
                'title': 'Middle name'
              },
              'lastName': {
                'type': 'string',
                'title': 'Last name'
              }
            }
          }
        }
      }
    }
    
    Reviewed by Nasir2712 at 2019-02-19 19:30
  • 3. Invalid output from oneOf element/wrong field bindings

    Describe the bug Invalid JSON output from oneOf elements, where the output value is nested a level deeper than expected.

    To Reproduce

    Schema:

    {
       "type":"object",
       "properties":{
          "vaule":{
             "oneOf":[
                {
                  "title":"String",
                  "type":"string"
                },
                {
                  "title":"Number",
                  "type":"number"
                }
             ]
          }
       }
    }
    

    UISchema:

    {
       "type":"Control",
       "label":"Value",
       "scope":"#/properties/vaule"
    }
    

    Enter string and inspect data as JSON, to get:

    {
      "vaule": {
        "vaule": [
          "abcdefg"
        ]
      }
    }
    

    Expected behavior

    Example output as JSON:

    {
        "vaule": "abcdefg"
    }
    

    Browser (please complete the following information):

    • Browser: Safari
    • Version: 12.0.3

    Used Setup (please complete the following information):

    • Framework: React
    • RendererSet: Material

    Additional context JSON Forms v2.2.0

    Reviewed by johnmorrell at 2019-02-07 12:25
  • 4. Preselect with default schema values

    For enumerated properties presented as a drop down list, where a default value is specified in the schema, it would make sense to pre-select that value. For example, 'red' should be pre selected:

          "colours":{
             "type":"string",
             "enum":[
                "red",
                "green",
                "blue"
             ],
             "default":"red"
          }
    
    Reviewed by johnmorrell at 2018-12-13 10:56
  • 5. [WIP] Handle nested array

    This PR aims at coming up with a solution for #994 and adds a UI schema registry which allows registering a custom UI schema that might be used by any renderer. It is only used by the MaterialArrayLayoutRenderer, which has also been added with this PR. A basic react application which democases the proposed solution and serves as a playground in the future also has been added.

    Reviewed by edgarmueller at 2018-06-06 09:45
  • 6. Enable customization of array renderer

    We need a way of customizing the array renderer, e.g. to hide the delete button. I think a custom renderer would be overkill, maybe we can use a declarative approach via options?

    Reviewed by edgarmueller at 2018-06-01 09:12
  • 7. Infinite loop when user is too fast with clicking

    Describe the bug

    We adapted the Vanilla package for our project to work with React (16.13.1) Native (0.63.4). The problem which occurs is when user is too fast with clicking on an UI element like a radio button, somehow this causes an infinite loop and the app crashs. The structure of the component looks like this:

    class Parent {
      //... 
      
     @bind
     private onChange({errors, data}) {
        this.setState({errors, data});
      }
    
      public render() {
        <JsonForms
          //...
          onChange={this.onChange}
        />
      }
    }
    

    When I prevent the Parent component from rerendering (e.g. by using "shouldComponentUpdate") everytime onChange is called the infinite loop issue is gone. Also this issue does not occur when the user slowly clicks on UI elements. So any explanation for this behavior?

    Expected behavior

    There should be no infinite loop no matter how quick or how slow a user clicks on an UI element and triggers rerenderings within JsonForms/in its parent component

    Steps to reproduce the issue

    1. Go to '...'
    2. Click on '....'
    3. Scroll down to '....'
    4. See error

    Screenshots

    No response

    In which browser are you experiencing the issue?

    React Native 0.63.4

    Framework

    React

    RendererSet

    Other (please specify in the Additional context field)

    Additional context

    We are using customized Vanilla package to work with React Native

    Reviewed by RyanLinXiang at 2021-07-08 15:06
  • 8. Support Schema reference to other Schema files

    With complex Schemas it can be useful to define in multiple files and reference across files, eg:

    "$ref":"definitions.json#/quantity"
    

    Currently (v2.1.0-rc.0) such references seem to fail to resolve. It would be very useful if this was supported.

    Reviewed by johnmorrell at 2019-01-05 20:11
  • 9. Support multiple jsonforms instances within a single store

    Currently, we only support a single instance of jsonforms in a redux store. We should find out what's necessary to support multiple forms within a single store.

    Reviewed by edgarmueller at 2018-02-21 16:50
  • 10. Fix performance of rendering lots of fields

    I introduced a fix in https://github.com/eclipsesource/jsonforms/pull/1214 to fix performance of rendering lots of fields. Since that time the code has shifted and that fix has been lost. The new manifestation appears to stems from JsonFormsDispatchRenderer calling hasRefs while ResolvedJsonFormsDispatchRenderer does not, as only the first JsonForm needs to handle processing resolving refs.

    Right now we are doing a lot of wasted object-hash comparisons in the hasRefs memoized check due to using the wrong component in our material and vanilla components.

    Reviewed by nowells at 2020-03-12 12:19
  • 11. Vanilla renderers and Array example problem

    Hi, because material-renderers don't work with MUI beta v.41, which I am using in my project, I've migrated to your vanilla renderers. When I try to reproduce this array example, following bugs occur:

    • there's no checkboxes and delete button so I'm unable to delete some row
    • add "row" button hasn't got type="button" so the onClick event submits the whole reduxForm instead of just adding new "row"
    Reviewed by ketysek at 2018-04-12 16:04
  • 12. Issue 1884

    This is fixing the issue https://github.com/eclipsesource/jsonforms/issues/1884

    To check that run vue-vanilla renderer set (using cd packages/vue/vue-vanilla && npm run serve) and then select the newly added example - Issue 1884 and check that when the committer checkbox is selected only then the address text fields are enabled.

    Reviewed by kchobantonov at 2022-07-01 02:53
  • 13. Incorrect return type for useControl in Vue

    Describe the bug

    Screen Shot 2022-06-28 at 4 10 16 PM

    Typescript shows an error when using control.value: Property 'value' does not exist on type But the control is returned as a ComputedRef object actually.

    Expected behavior

    control returns a ComputedRef object.

    https://github.com/eclipsesource/jsonforms/blob/d2bf053315be914b1766a62eb6b7681a530a6633/packages/vue/vue/src/jsonFormsCompositions.ts#L169-L172

    Perhaps the line 150, 155, and 190 should replace with ComputedRef<R>

    https://github.com/eclipsesource/jsonforms/blob/d2bf053315be914b1766a62eb6b7681a530a6633/packages/vue/vue/src/jsonFormsCompositions.ts#L147-L155

    Steps to reproduce the issue

    1. Call functions that call useControl inside, e.g. useJsonFormsControl
    2. Get value by control.value
    3. See type error

    Screenshots

    No response

    In which browser are you experiencing the issue?

    Brave 1.38.115

    Framework

    Vue 2

    RendererSet

    Other (please specify in the Additional context field)

    Additional context

    No response

    Reviewed by Cynthiafan at 2022-06-28 08:27
  • 14. Translate UI Schema elements

    'Group', 'Category' and 'Label' UI Schema elements are now translatable via bindings.

    'mapStateToLayoutProps' is enhanced to check for 'label' or 'i18n' attributes within the UI Schema element. If that's the case the translator will be invoked and the label handed over which is then used by the group renderers.

    The categorization renderers access the new utility 'deriveLabelForUISchemaElement' to translate the labels of their categories. This is done within the respective renderer code.

    For labels a new mapStateToLabelProps mapper is added which provides access to a 'text' property. Corresponding bindings are added to all renderer sets and used by the respective renderers.

    Also improves some typings in core and streamlines prop handling in the React bindings.

    Reviewed by sdirix at 2022-06-28 08:04
  • 15. MUI Autocomplete has no endAdornment arrow

    Is your feature request related to a problem? Please describe.

    The autocomplete renderer does not have a a downwards pointing arrow to indicate that clicking it will open a dropdown.

    Describe the solution you'd like

    A downward arrow at the left of the autocomplete, as is the default behaviour for the MUI autocomplete.

    Describe alternatives you've considered

    Creating a custom autocomplete renderer (this seems like overkill)

    Framework

    React

    RendererSet

    Material

    Additional context

    No response

    Reviewed by lovervoorde at 2022-06-27 19:58
  • 16. Bump jsdom from 15.2.1 to 16.5.0

    Bumps jsdom from 15.2.1 to 16.5.0.

    Release notes

    Sourced from jsdom's releases.

    Version 16.5.0

    • Added window.queueMicrotask().
    • Added window.event.
    • Added inputEvent.inputType. (diegohaz)
    • Removed ondragexit from Window and friends, per a spec update.
    • Fixed the URL of about:blank iframes. Previously it was getting set to the parent's URL. (SimonMueller)
    • Fixed the loading of subresources from the filesystem when they had non-ASCII filenames.
    • Fixed the hidden="" attribute to cause display: none per the user-agent stylesheet. (ph-fritsche)
    • Fixed the new File() constructor to no longer convert / to :, per a pending spec update.
    • Fixed mutation observer callbacks to be called with the MutationObserver instance as their this value.
    • Fixed <input type=checkbox> and <input type=radio> to be mutable even when disabled, per a spec update.
    • Fixed XMLHttpRequest to not fire a redundant final progress event if a progress event was previously fired with the same loaded value. This would usually occur with small files.
    • Fixed XMLHttpRequest to expose the Content-Length header on cross-origin responses.
    • Fixed xhr.response to return null for failures that occur during the middle of the download.
    • Fixed edge cases around passing callback functions or event handlers. (ExE-Boss)
    • Fixed edge cases around the properties of proxy-like objects such as localStorage or dataset. (ExE-Boss)
    • Fixed a potential memory leak with custom elements (although we could not figure out how to trigger it). (soncodi)

    Version 16.4.0

    • Added a not-implemented warning if you try to use the second pseudo-element argument to getComputedStyle(), unless you pass a ::part or ::slotted pseudo-element, in which case we throw an error per the spec. (ExE-Boss)
    • Improved the performance of repeated access to el.tagName, which also indirectly improves performance of selector matching and style computation. (eps1lon)
    • Fixed form.elements to respect the form="" attribute, so that it can contain non-descendant form controls. (ccwebdesign)
    • Fixed el.focus() to do nothing on disconnected elements. (eps1lon)
    • Fixed el.focus() to work on SVG elements. (zjffun)
    • Fixed removing the currently-focused element to move focus to the <body> element. (eps1lon)
    • Fixed imgEl.complete to return true for <img> elements with empty or unset src="" attributes. (strager)
    • Fixed imgEl.complete to return true if an error occurs loading the <img>, when canvas is enabled. (strager)
    • Fixed imgEl.complete to return false if the <img> element's src="" attribute is reset. (strager)
    • Fixed the valueMissing validation check for <input type="radio">. (zjffun)
    • Fixed translate="" and draggable="" attribute processing to use ASCII case-insensitivity, instead of Unicode case-insensitivity. (zjffun)

    Version 16.3.0

    • Added firing of focusin and focusout when using el.focus() and el.blur(). (trueadm)
    • Fixed elements with the contenteditable="" attribute to be considered as focusable. (jamieliu386)
    • Fixed window.NodeFilter to be per-Window, instead of shared across all Windows. (ExE-Boss)
    • Fixed edge-case behavior involving use of objects with handleEvent properties as event listeners. (ExE-Boss)
    • Fixed a second failing image load sometimes firing a load event instead of an error event, when the canvas package is installed. (strager)
    • Fixed drawing an empty canvas into another canvas. (zjffun)

    Version 16.2.2

    • Updated StyleSheetList for better spec compliance; notably it no longer inherits from Array.prototype. (ExE-Boss)
    • Fixed requestAnimationFrame() from preventing process exit. This likely regressed in v16.1.0.
    • Fixed setTimeout() to no longer leak the closures passed in to it. This likely regressed in v16.1.0. (AviVahl)
    • Fixed infinite recursion that could occur when calling click() on a <label> element, or one of its descendants.
    • Fixed getComputedStyle() to consider inline style="" attributes. (eps1lon)
    • Fixed several issues with <input type="number">'s stepUp() and stepDown() functions to be properly decimal-based, instead of floating point-based.
    • Fixed various issues where updating selectEl.value would not invalidate properties such as selectEl.selectedOptions. (ExE-Boss)
    • Fixed <input>'s src property, and <ins>/<del>'s cite property, to properly reflect as URLs.
    • Fixed window.addEventLister, window.removeEventListener, and window.dispatchEvent to properly be inherited from EventTarget, instead of being distinct functions. (ExE-Boss)
    • Fixed errors that would occur if attempting to use a DOM object, such as a custom element, as an argument to addEventListener.

    ... (truncated)

    Changelog

    Sourced from jsdom's changelog.

    16.5.0

    • Added window.queueMicrotask().
    • Added window.event.
    • Added inputEvent.inputType. (diegohaz)
    • Removed ondragexit from Window and friends, per a spec update.
    • Fixed the URL of about:blank iframes. Previously it was getting set to the parent's URL. (SimonMueller)
    • Fixed the loading of subresources from the filesystem when they had non-ASCII filenames.
    • Fixed the hidden="" attribute to cause display: none per the user-agent stylesheet. (ph-fritsche)
    • Fixed the new File() constructor to no longer convert / to :, per a pending spec update.
    • Fixed mutation observer callbacks to be called with the MutationObserver instance as their this value.
    • Fixed <input type=checkbox> and <input type=radio> to be mutable even when disabled, per a spec update.
    • Fixed XMLHttpRequest to not fire a redundant final progress event if a progress event was previously fired with the same loaded value. This would usually occur with small files.
    • Fixed XMLHttpRequest to expose the Content-Length header on cross-origin responses.
    • Fixed xhr.response to return null for failures that occur during the middle of the download.
    • Fixed edge cases around passing callback functions or event handlers. (ExE-Boss)
    • Fixed edge cases around the properties of proxy-like objects such as localStorage or dataset. (ExE-Boss)
    • Fixed a potential memory leak with custom elements (although we could not figure out how to trigger it). (soncodi)

    16.4.0

    • Added a not-implemented warning if you try to use the second pseudo-element argument to getComputedStyle(), unless you pass a ::part or ::slotted pseudo-element, in which case we throw an error per the spec. (ExE-Boss)
    • Improved the performance of repeated access to el.tagName, which also indirectly improves performance of selector matching and style computation. (eps1lon)
    • Fixed form.elements to respect the form="" attribute, so that it can contain non-descendant form controls. (ccwebdesign)
    • Fixed el.focus() to do nothing on disconnected elements. (eps1lon)
    • Fixed el.focus() to work on SVG elements. (zjffun)
    • Fixed removing the currently-focused element to move focus to the <body> element. (eps1lon)
    • Fixed imgEl.complete to return true for <img> elements with empty or unset src="" attributes. (strager)
    • Fixed imgEl.complete to return true if an error occurs loading the <img>, when canvas is enabled. (strager)
    • Fixed imgEl.complete to return false if the <img> element's src="" attribute is reset. (strager)
    • Fixed the valueMissing validation check for <input type="radio">. (zjffun)
    • Fixed translate="" and draggable="" attribute processing to use ASCII case-insensitivity, instead of Unicode case-insensitivity. (zjffun)

    16.3.0

    • Added firing of focusin and focusout when using el.focus() and el.blur(). (trueadm)
    • Fixed elements with the contenteditable="" attribute to be considered as focusable. (jamieliu386)
    • Fixed window.NodeFilter to be per-Window, instead of shared across all Windows. (ExE-Boss)
    • Fixed edge-case behavior involving use of objects with handleEvent properties as event listeners. (ExE-Boss)
    • Fixed a second failing image load sometimes firing a load event instead of an error event, when the canvas package is installed. (strager)
    • Fixed drawing an empty canvas into another canvas. (zjffun)

    16.2.2

    • Updated StyleSheetList for better spec compliance; notably it no longer inherits from Array.prototype. (ExE-Boss)
    • Fixed requestAnimationFrame() from preventing process exit. This likely regressed in v16.1.0.
    • Fixed setTimeout() to no longer leak the closures passed in to it. This likely regressed in v16.1.0. (AviVahl)
    • Fixed infinite recursion that could occur when calling click() on a <label> element, or one of its descendants.
    • Fixed getComputedStyle() to consider inline style="" attributes. (eps1lon)
    • Fixed several issues with <input type="number">'s stepUp() and stepDown() functions to be properly decimal-based, instead of floating point-based.

    ... (truncated)

    Commits
    • 2d82763 Version 16.5.0
    • 9741311 Fix loading of subresources with Unicode filenames
    • 5e46553 Use domenic's ESLint config as the base
    • 19b35da Fix the URL of about:blank iframes
    • 017568e Support inputType on InputEvent
    • 29f4fdf Upgrade dependencies
    • e2f7639 Refactor create‑event‑accessor.js to remove code duplication
    • ff69a75 Convert JSDOM to use callback functions
    • 19df6bc Update links in contributing guidelines
    • 1e34ff5 Test triage
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-06-23 00:45
  • 17. date-time format material renderer crashes

    Describe the bug

    When trying to use the date time picker for a date-time format field with materialRenders, the follow error occurs: TypeError: Cannot read properties of undefined (reading 'indexOf')

    Expected behavior

    The date-time picker should fill the form field with the selected date-time.

    Steps to reproduce the issue

    The easiest way to see this in action is on the date time picker demo on the documentation pages.

    In the Demo, click the picker icon, see the resulting error.

    Screenshots

    image

    In which browser are you experiencing the issue?

    Google Chrome Version 101.0.4951.64 (Official Build) (x86_64)

    Framework

    React

    RendererSet

    Material

    Additional context

    I initially encountered this problem prototyping a form locally, then discovered the documentation demo appears to suffer the same issue. Here is a stack trace from my local application: image

    Reviewed by hellkite500 at 2022-06-07 14:17
Laravel Enso Form Builder is a customizable, template based form creator, so you can quickly create forms with the minimum amount of effort
Laravel Enso Form Builder is a customizable, template based form creator, so you can quickly create forms with the minimum amount of effort

Forms JSON-based Form builder for Laravel Enso This package can work independently of the Enso ecosystem. The front end implementation that utilizes t

Mar 9, 2022
Vue JSON form - 基于vue 通过 json 呈现视图

Vue JSON form 通过 JSON 呈现任何组件与定义脚本的实现 使用任何 Vue 组件或 html 元素构建视图 开发 vue 项目时,可能会遇到以下需求场景 界面以及交互行为需要通过配置动态呈现 定义的配置需要进行存储和读取 配置需要通过可视化界面进行编辑 普通 JSON 数据虽然可以描

Jun 16, 2022
:clipboard: A schema-based form generator component for Vue.js
:clipboard: A schema-based form generator component for Vue.js

vue-form-generator A schema-based form generator component for Vue.js. Demo JSFiddle simple example CodePen simple example Features reactive forms bas

Jul 4, 2022
Easy way to dynamically create reactive forms in Vue based on a varying business object model
Easy way to dynamically create reactive forms in Vue based on a varying business object model

Vue 3.x.x Dynamic Forms Implementing handcrafted forms can be: Costly Time-consuming Especially if you need to create a very large form, in which the

Jun 23, 2022
Reforms.js - Vue 3 and Bootstrap 5 forms and cards generator
Reforms.js - Vue 3 and Bootstrap 5 forms and cards generator

Reforms.js - Vue 3 and Bootstrap 5 forms and cards generator

Apr 8, 2022
JavaScript powered forms for Vue.js

Vue Formly Looking for maintainers It's been many years since I first created Vue Formly and it's been a great project. However, it was a project that

Apr 1, 2022
⚡️ The easiest way to build forms with Vue.
⚡️ The easiest way to build forms with Vue.

Documentation Website What is Vue Formulate? Vue Formulate is the easiest way to build forms with Vue. Please read the comprehensive documentation for

Jun 28, 2022
Create conversational conditional-logic forms with Vue.js.
Create conversational conditional-logic forms with Vue.js.

Create conversational conditional-logic forms with Vue.js.

Jun 30, 2022
Building forms with vue composition API.

Vue Hooks Form · Building forms with Vue composition API. The API is not stable and might change in the future. Docs Visit https://beizhedenglong.gith

May 23, 2022
A Vue widget for Howzit contact forms

howzit-vue A Vue widget for Howzit contact forms. Howzit There is a standalone server component available at UnicornGlobal/howzit that you can host yo

Jan 13, 2020
A form library for vue, inspired by Formik for react

vue-simpleform A form library for vue, inspired by Formik for react Is it really simple? I think it is, but really I couldn't think of a better name B

May 10, 2022
a vue form component just like json-editor

vue-awesome-form a vue form component just like json-editor Install # npm/yarn npm install vue-awesome-form yarn add vue-awesome-form Use register th

Feb 8, 2021
Vue dynamic nested form component, support nested Object/Hashmap/Array.
Vue dynamic nested form component, support nested Object/Hashmap/Array.

Introduction vue-dynamic-form-component is a dynamic form component base on element-ui and async-validator. You just need to write descriptors(referen

Jun 25, 2022
This package provides easy form wrappers for Vue2, based upon the Bootstrap v4 CSS Framework

Vue Form Components This package provides easy form wrappers for Vue2, based upon the Bootstrap v4 CSS Framework. There are a variety of components th

Feb 4, 2022
Clean & minimal vue form elements and form builder with validation

Vue Form Components Documentation https://antonreshetov.github.io/vue-form-components Install NPM Installing with npm is recommended and it works seam

May 21, 2022
A Notion-like forn using Vue 3, Vite and TailwindCSS

A Notion-like forn using Vue 3, Vite and TailwindCSS

Jun 27, 2022
Vue.js Commerce.js plugin and wrapper chec-payment-form component for checkout flow

Vue.js Commerce.js plugin and wrapper chec-payment-form component for checkout flow

Oct 1, 2020
Library that help to submit form and handle validation in Laravel Vue Application

vue-js-form-helper This is a small library that makes form submit and validation easier to use. Installation npm i vue-js-form-helper Code Example The

Sep 9, 2020