Really appreciate it for writing this up! Hopefully it will support dependencies in the future (like react-jsonschema-form does!)

Hi, nice work here bro, I am reading the package implementation, and look pretty strong, I forked and implemented a custom file upload component with some AWS S3 features, and it works!, but I can't remove the Collapse Effect from SchemaForm, it seems to be wrapped by a Collapse Panel in the package implementation. I can replace the Collapse with a div or fragment, rebuild package, local install, .... and works very well, but have to build the package again for that, is there any way to disable Collapse from a prop or something??? to not modify the package, sorry the simple question, I am quite new in ant design and JSON schema.

Hi

Would you mind explain the difference between the official jsonschema definition and the definition you use ?

I tried you librarie using an example from https://json-schema.org/learn/miscellaneous-examples.html (last one on fruits/vegetables), when I click on the main dropdown it raises Uncaught Error: Must call getFieldProps with valid name string!, I fixed it by adding ids to both properties to end with the following

    "properties": {
        "fruits": {
            "id": "fruits",
            "type": "array",
            "items": {
                "type": "string"
            }
        },
        "vegetables": {
            "id": "vegetables",
            "type": "array",
            "items": {"$ref": "#/definitions/veggie"}
        }
    },

so why it there an id to add ?

Then, now I'm getting the error when clicking on the button Adding data : what are the other différences to add to get it work with you lib ?

Thanks

Hi, Great job.

Consider supporting something like:

const formOptions = {
  onValuesChange(props, changedValues, allValues) {
    // ...
  }
}

<SchemaForm formOptions={formOptions} />

I would like to be able to define a way to configure the visualization of the dates.

I've seen that creating a nested structure like this:

{
  id: '$root',
  type: 'object',
  title: 'Form',
  description: "Custom Entity's settings",
  properties: {
    scheduleExceptions: {
      id: '$root/properties/schedule-exceptions',
      type: 'array',
      title: 'Schedule exceptions',
      description: 'List of exceptions aside of default schedule',
      items: {
        id: '$root/properties/schedule-exceptions/items',
        type: 'object',
        title: 'Starting hour',
        description: 'Please fill the starting hour',
        properties: {
          col1: {
            id: '$root/properties/schedule-exceptions/items/properties/col1',
            type: 'string',
            title: 'Day',
            $componentType: 'date',
            $defaultValue: '2010-12-15 08:12:14',
          },
          col2: {
            id: '$root/properties/schedule-exceptions/items/properties/col2',
            type: 'string',
            title: 'From',
            description: 'from desc',
          },
          col3: {
            id: '$root/properties/schedule-exceptions/items/properties/col3',
            type: 'string',
            title: 'To',
            description: 'from desc',
          },
        },
      },
    },
  },
}

Generates a table where is not possible to understand the information inside:

Is there any good approach to improve this?

P.S: As date is a native component of this library, I understand that a solution to display it should be built-in being not necessary to use customComponent.

Thank you

This is amazing work! Thanks for publishing.

Any plans to support custom components for the "object" type. I'm looking to create Tabs rather than Collapse for a wizard-like experience.

I am unable to change the layout of the form.
As seen in the screenshot below, the long text for label "A super long name for boolean" is cut off.

Maybe we could have a way to pass our own labelCol and wrapperCol props to SchemaForm which it forwards to the FormObject here.

If this can be achieved then we could pass other props too, to make the component fully customizable to the extent <Form/> component already does.

Also, any suggestion on how to have a radio or checkbox with default value and disabled too?
I can set a default value but can't disable it.

Use case: I want the user to know the value of the checkbox/radio but not allow him to change it.

Thanks!

The id property is necessary for client , but not for server. it is best to keep that at client.

As I see in:

Btw, thank you, good library :)

Hi, this is a great tool, thank you for creating it 😊

There seems to be an issue with the generating tool, once you try to use the Add value button, the new form opens but on Ok nothing happens

Thank you.

If possible, can we add the wechat for further discussion? Mine is MrSixteen733

Good morning my friends

About validation error: is not a valid undefined

I implemented the following project

https://react-berry.vercel.app/react-berry/patients#613253b93d4bfc65cd41156c

We see that even filled the fields, for 2 of these fields a validation error is returned

async-validator: ["'$root/properties/dob/properties/age' is not a valid undefined"]
async-validator: ["'$root/properties/registered/properties/age' is not a valid undefined"]

If I click on the field, put any character and remove the character I can already go through validation

Thank you in advance if you can help

implement select with json form schema standard.

 "selectWidgetOptions": {
      "title": "Custom select widget with options",
      "type": "string",
      "enum": [
        "foo",
        "bar"
      ],
      "enumNames": [
        "Foo",
        "Bar"
      ]
    }

instead of

"select": {
      "id": "$root/properties/string/properties/select",
      "type": "string",
      "title": "下拉框组件",
      "description": "下拉框组件",
      "$componentType": "select",
      "$options": [
        {
          "label": "选项1",
          "value": "值1"
        },
        {
          "label": "选项2",
          "value": "值2"
        }
      ]
    },

For select with auto complete ability, seems there is no solution in JSON form schema document, but we can implement it with custom widget. just leave this to developer.

antd 3.21.4
antd-schema-form 3.0.1

import SchemaForm
Property 'form' is missing in type '{ json: { id: string; type: string; title: string; description: string; properties: { string: { id: string; type: string; title: string; description: string; properties: { default: { id: string; type: string; title: string; description: string; }; ... 15 more ...; oneOf: { ...; }; }; required: string[]; dependencies...' but required in type 'SchemaFormProps'.ts(2741)
Form.d.ts(165, 5): 'form' is declared here.

只有第一次添加时会刷新，之后添加就不刷新了。

在自己生成的表单里，给对象数组类型添加值时，界面也不会刷新。

我想要实现通过改变select的值, 在调用select的onChange方法后将input中的值更改.

上方的是select, 在选择后input中显示不同的描述

rename $componentType to widget, $options to $widgetOptions,

so the customized json schema is less aware of ReactJS jargon.

 "radio": {
      "id": "$root/properties/string/properties/radio",
      "type": "string",
      "title": "单选框组件",
      "description": "单选框组件",
      "$componentType": "radio",
      "$options": [
        {
          "label": "选项1",
          "value": "值1"
        },
        {
          "label": "选项2",
          "value": "值2"
        }
      ]
    },

change to

 "radio": {
      "id": "$root/properties/string/properties/radio",
      "type": "string",
      "title": "单选框组件",
      "description": "单选框组件",
      "$widget": "radio",
      "$widgetOptions": [
        {
          "label": "选项1",
          "value": "值1"
        },
        {
          "label": "选项2",
          "value": "值2"
        }
      ]
    },

widget is more meaningful than component type.

always pass $options to $componentType.

FormString.tsx

   // 渲染默认组件
    default:
      element = (customComponent && $componentType && $componentType in customComponent)
        ? customComponent[$componentType](root, option,  form, required)
        : getFieldDecorator(id, option)(<Input readOnly={ $readOnly } placeholder={ $placeholder } />);
      break;

I think it is necessary to pass $options to $componentType, I have a schema like this, the owner is integer type, but I'd like to make it works like auto complete.

{
    "title": "acme_channel",
    "type": "object",
    "properties": {
        "owner": {
            "title": "acme.user.owner.label",
            "type": "integer",
            "$widget": "autocomplete",
            "$widgetOptions": {
                "placeholder": "acme.form.choose_value",
                "allowClear": false,
                "minimumInputLength": 0,
                "multiple": false,
                "autocomplete_alias": "business_units_owner_search_handler",
                "component": "tree-autocomplete",
                "properties": [
                    "name"
                ],
                "route_name": "acme_form_autocomplete_search",
                "route_parameters": []
            },
            "propertyOrder": 1
        }
    }
}

please check react-jsonschema-form, the widget part. also I think the $widgetOptions should be object instead of array, if you want to make it works as select, the solution is already existed.

 "selectWidgetOptions": {
      "title": "Custom select widget with options",
      "type": "string",
      "enum": [
        "foo",
        "bar"
      ],
      "enumNames": [
        "Foo",
        "Bar"
      ]
    }

修改和添加数据分别怎么得到?

Hello,
This is more like a question. How can I disable autocomplete for forms generated by antd-schema-form

Thanks

There is another similar repo antd-jsonschema-form which follows react-jsonschema-form approach. we all are interested in json form schema based on Antd. I suggest I do this together. your library has some drawbacks.

1. $id is provided manually. this is not necessary. we can follow react-jsonschema-form ways.
2. JSON schema is bound to the widget component itself, it is best to separate schema resolving logic to widget component like react-jsonschema-form does.
3. It is best to keep close to JSON schema form standard as possible, but still keep it simple.
4. The whole architecture is not flexible enough to customize. add new feature will change existing code dramatically.

尝试使用已有的时间组件，使用说明上看起来有些疑惑

hi, you lib will import lots of antd component even we try to generate a simple form, because all these components are imported statically, do you have solution for this?

FormObject.tsx

import FormString from '../FormString/FormString';
import FormNumber from '../FormNumber/FormNumber';
import FormBoolean from '../FormBoolean/FormBoolean';
import FormArray from '../FormArray/FormArray';

demo 里的 CreateForm 能开源吗？好奇怎么实现哒~

Hi, this is a great tool, thank you for creating it 😊

I am having an issue with my form elements being rendered not in the order I set them in the JSON.
I am getting the JSON schema over HTTP and so the properties object is automatically rearranged and are not in the order I want them to be in.

I am setting properties on server as:

{
  //...id,type,title,description
  "properties": { 
    "username": {...}, 
    "password": {...}, 
    "somethingElse1": {...},
    "somethingElse2": {...},
  }
}

but getting it on client as:

{
  //...id,type,title,description
  "properties": { 
    "somethingElse2": {...},
    "username": {...}, 
    "somethingElse1": {...},
    "password": {...}, 
  }
}

This is expected as the properties field is JSONObject and as per the JSON specification at JSON.org:

An object is an unordered set of name/value pairs

and so JSON libraries are free to rearrange the order of the elements as they see fit.

Could we maybe store this data in properties as JSONArray instead of JSONObject?

If there is any other way to do this which I missed out in the documentation, please ignore this and point me in the right direction. Thank you!

"gender": { "id": "$root/properties/gender", "type": "array", "title": "性别", "description": "请选择性别", "$componentType": "tags", "$required": true },