https://github.com/duan602728596/antd-schema-form
Based on Ant Design, interactive forms can be generated through JSON Schema configuration. - 基于Ant Design，可以通过JSON Schema配置生成可交互的表单。
https://github.com/duan602728596/antd-schema-form
ant ant-design antd form react-component
Last synced: 5 months ago
JSON representation
Based on Ant Design, interactive forms can be generated through JSON Schema configuration. - 基于Ant Design，可以通过JSON Schema配置生成可交互的表单。
- Host: GitHub
- URL: https://github.com/duan602728596/antd-schema-form
- Owner: duan602728596
- License: mit
- Created: 2018-11-19T15:13:18.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2025-01-22T07:32:51.000Z (over 1 year ago)
- Last Synced: 2025-10-08T21:19:36.191Z (8 months ago)
- Topics: ant, ant-design, antd, form, react-component
- Language: TypeScript
- Homepage: https://duan602728596.github.io/antd-schema-form/#/
- Size: 27.4 MB
- Stars: 172
- Watchers: 5
- Forks: 27
- Open Issues: 9
-
Metadata Files:
- Readme: README-zhCN.md
- Changelog: CHANGELOG-zhCN.md
- License: LICENSE
Awesome Lists containing this project
README
# antd-schema-form
[![NPM version][antd-schema-form-image]][antd-schema-form-url]
[![NPM version][react-image]][react-url]
[![NPM version][react-dom-image]][react-dom-url]
[![NPM version][ant-design-image]][ant-design-url]
[antd-schema-form-image]: https://img.shields.io/npm/v/antd-schema-form.svg
[antd-schema-form-url]: https://www.npmjs.com/package/antd-schema-form
[react-image]: https://img.shields.io/badge/react-%3E=16.7.0-red.svg
[react-url]: https://github.com/facebook/react
[react-dom-image]: https://img.shields.io/badge/react--dom-%3E=16.7.0-red.svg
[react-dom-url]: https://github.com/facebook/react
[ant-design-image]: https://img.shields.io/badge/ant--design-%3E=5-red.svg
[ant-design-url]: https://github.com/ant-design/ant-design
antd-schema-form基于[Ant Design](https://ant.design/)，可以通过[JSON Schema](http://json-schema.org/draft-07/json-schema-validation.html)配置快速生成可交互的表单。
这个[Demo](https://duan602728596.github.io/antd-schema-form/#/)简单的展示了通过配置schema.json构建一个表单。
## 开始使用
1. React的版本`>=16.7.0`。
2. 组件的使用:
```javascript
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import SchemaForm, {
getKeysFromObject, // 获取schema.json下所有的key
getObjectFromValue, // object对象，格式化成表单需要的值
getValueFromObject // 从form获取到的表单的值，格式化成object对象
} from 'antd-schema-form';
import 'antd-schema-form/style/antd-schema-form.css'; // 引入样式
// json schema
const json = {
id: '$root',
type: 'object',
title: '$root',
properties: {}
};
ReactDOM.render(
,
document.getElementById('app')
);
```
## API
| 参数 | 说明 | 类型 |
| --- | --- | --- |
| json | json schema，必需 | object |
| value | 表单的值 | object |
| onOk | 表单的确认事件 | (form: object, value: object, keys: Array<string>) => void |
| onCancel | 表单的取消事件 | (form: object, keys: Array<string>) => void |
| okText | 确认按钮文字 | string |
| cancelText | 取消按钮文字 | string |
| footer | 自定义底部内容，onOk事件[参考](https://github.com/duan602728596/antd-schema-form/blob/master/src/components/FormObject/FormObject.tsx#L143) | (form: object) => React.Node |
| customComponent | 自定义渲染组件，[参考](docs/custom_rendering_component-zhCN.md) | object |
| customTableRender | 自定义表格列渲染组件，[参考](docs/custom_rendering_component-zhCN.md#自定义表格列渲染组件) | object |
| languagePack | 语言配置，[参考](language/zh-CN.json) | object |
| formOptions | `Form`的参数，[参考](https://ant.design/components/form-cn/#Form) | object |
## [json schema配置](docs/json_schema_configuration-zhCN.md)
## [自定义渲染组件](docs/custom_rendering_component-zhCN.md)
## [按需加载组件](docs/load_components_as_needed-zhCN.md)
## 开发和测试
* 运行命令`npm run dev`，在浏览器中输入`http://127.0.0.1:5050`查看demo并开发。
* 运行命令`npm run build`和`npm run test`，在浏览器中输入`http://127.0.0.1:6060`运行测试用例。