{"_id":"@4399ywkf/form-render","_rev":"3-2090799b0b7c87ad0ea025869bfd7622","name":"@4399ywkf/form-render","dist-tags":{"latest":"1.14.2"},"versions":{"1.14.0":{"name":"@4399ywkf/form-render","version":"1.14.0","keywords":["Form","FormRender","Render","XRender","React","Json Schema","Ant Design"],"license":"MIT","_id":"@4399ywkf/form-render@1.14.0","maintainers":[{"name":"ywjszx","email":"ywjszx@4399.com"}],"contributors":[{"name":"Tw93","email":"tw93@qq.com"},{"name":"mankaiviky","email":"mankaiviky@163.com"},{"name":"FateRiddle","email":"fateriddle@gmail.com"}],"homepage":"https://xrender.fun/form-render","bugs":{"url":"https://github.com/alibaba/x-render/issues"},"dist":{"shasum":"c2e32b086b8c9e1f9bf15524c586cc79c9e23589","tarball":"https://registry.npmjs.org/@4399ywkf/form-render/-/form-render-1.14.0.tgz","fileCount":108,"integrity":"sha512-xMVrOlW/qP8bxfrqXAmQraSR8VWDp77qeMDQILR9FwKfCiR6W1gHxoTuGrH1Q3avrDdqmEu/vPaP0Zog+5MxUQ==","signatures":[{"sig":"MEYCIQDWCkyoCyLyOcLiEhgfr6UVJ8Ja8te6/p8rCm0Gwf6TaQIhAIDj7pjDwNmU91mKTrthHtCmRHUQmGgWXAJSWJRQlcF2","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":687561},"main":"lib/index.js","types":"./lib/index.d.ts","module":"es/index.js","scripts":{"beta":"npm publish --tag beta","next":"npm publish --tag next","test":"umi-test","build":"father-build","prepare":"npm run build","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","postpublish":"git push --tags","test:coverage":"umi-test --coverage"},"_npmUser":{"name":"ywjszx","email":"ywjszx@4399.com"},"gitHooks":{"pre-commit":"lint-staged"},"repository":{"url":"git+ssh://git@github.com/alibaba/form-render.git","type":"git"},"sideEffect":false,"_npmVersion":"11.1.0","description":"通过 JSON Schema 生成标准 Form，常用于自定义搭建配置界面生成","directories":{},"lint-staged":{"*.ts?(x)":["prettier --parser=typescript --write"],"*.{js,jsx,less,md,json}":["prettier --write"]},"_nodeVersion":"22.14.0","dependencies":{"color":"^3.1.2","lodash-es":"^4.17.21","classnames":"^2.3.1","smooth-scroll":"^16.1.3","async-validator":"^3.5.1","rc-color-picker":"^1.2.6","@ant-design/icons":"^5.4.0","virtualizedtableforantd4":"^1.1.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"deep-equal":"^2.0.3","rollup-plugin-copy":"^3.4.0"},"peerDependencies":{"antd":"5.x","react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/form-render_1.14.0_1755508221936_0.6626566256305662","host":"s3://npm-registry-packages-npm-production"}},"1.14.1":{"name":"@4399ywkf/form-render","version":"1.14.1","keywords":["Form","FormRender","Render","XRender","React","Json Schema","Ant Design"],"license":"MIT","_id":"@4399ywkf/form-render@1.14.1","maintainers":[{"name":"ywjszx","email":"ywjszx@4399.com"}],"contributors":[{"name":"Tw93","email":"tw93@qq.com"},{"name":"mankaiviky","email":"mankaiviky@163.com"},{"name":"FateRiddle","email":"fateriddle@gmail.com"}],"homepage":"https://xrender.fun/form-render","bugs":{"url":"https://github.com/alibaba/x-render/issues"},"dist":{"shasum":"4ab90a7f616b076f2715a16ee49966d4fd20e01c","tarball":"https://registry.npmjs.org/@4399ywkf/form-render/-/form-render-1.14.1.tgz","fileCount":108,"integrity":"sha512-OgRjyDRIMHOfcmIyw+MKB/hy9Seli2N6qYDXPBwl/jBxfOzP4TwLxHDLS0u0+0VO7KQCqks750HhSY+MXZjGtg==","signatures":[{"sig":"MEUCIQC7/xrAARN6GXqlniEM+KXqI/assY87Q/anGMnc2ezN4wIgGng/PltlZaFGA6DoW5cYwGFts/zpB0cA/ERKPVU49ak=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":687561},"main":"lib/index.js","types":"./lib/index.d.ts","module":"es/index.js","gitHead":"f0d4967c3f7e7f1e43b1d646c6c60579830445e5","scripts":{"beta":"npm publish --tag beta","next":"npm publish --tag next","test":"umi-test","build":"father-build","prepare":"npm run build","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","postpublish":"git push --tags","test:coverage":"umi-test --coverage"},"_npmUser":{"name":"ywjszx","email":"ywjszx@4399.com"},"gitHooks":{"pre-commit":"lint-staged"},"repository":{"url":"git+ssh://git@github.com/alibaba/form-render.git","type":"git"},"sideEffect":false,"_npmVersion":"11.1.0","description":"通过 JSON Schema 生成标准 Form，常用于自定义搭建配置界面生成","directories":{},"lint-staged":{"*.ts?(x)":["prettier --parser=typescript --write"],"*.{js,jsx,less,md,json}":["prettier --write"]},"_nodeVersion":"22.14.0","dependencies":{"color":"^3.1.2","lodash-es":"^4.17.21","classnames":"^2.3.1","smooth-scroll":"^16.1.3","async-validator":"^3.5.1","rc-color-picker":"^1.2.6","@ant-design/icons":"^5.4.0","virtualizedtableforantd4":"^1.1.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"deep-equal":"^2.0.3","rollup-plugin-copy":"^3.4.0"},"peerDependencies":{"antd":"5.x","react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/form-render_1.14.1_1755508374062_0.40399076320335925","host":"s3://npm-registry-packages-npm-production"}},"1.14.2":{"name":"@4399ywkf/form-render","version":"1.14.2","description":"通过 JSON Schema 生成标准 Form，常用于自定义搭建配置界面生成","keywords":["Form","FormRender","Render","XRender","React","Json Schema","Ant Design"],"homepage":"https://xrender.fun/form-render","bugs":{"url":"https://github.com/alibaba/x-render/issues"},"repository":{"type":"git","url":"git+ssh://git@github.com/alibaba/form-render.git"},"license":"MIT","contributors":[{"name":"Tw93","email":"tw93@qq.com"},{"name":"mankaiviky","email":"mankaiviky@163.com"},{"name":"FateRiddle","email":"fateriddle@gmail.com"}],"main":"lib/index.js","module":"es/index.js","scripts":{"beta":"npm publish --tag beta","build":"father-build","next":"npm publish --tag next","prepare":"npm run build","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","postpublish":"git push --tags","test":"umi-test","test:coverage":"umi-test --coverage"},"lint-staged":{"*.{js,jsx,less,md,json}":["prettier --write"],"*.ts?(x)":["prettier --parser=typescript --write"]},"dependencies":{"@ant-design/icons":"^5.4.0","async-validator":"^3.5.1","classnames":"^2.3.1","color":"^3.1.2","lodash-es":"^4.17.21","rc-color-picker":"^1.2.6","smooth-scroll":"^16.1.3","virtualizedtableforantd4":"^1.1.2"},"devDependencies":{"deep-equal":"^2.0.3","rollup-plugin-copy":"^3.4.0"},"peerDependencies":{"antd":"5.x","react":">=16.8.0","react-dom":">=16.8.0"},"publishConfig":{"access":"public"},"gitHooks":{"pre-commit":"lint-staged"},"sideEffect":false,"_id":"@4399ywkf/form-render@1.14.2","gitHead":"506ce39acd423f9eb718e47faffc7aa1c98bf453","types":"./lib/index.d.ts","_nodeVersion":"22.14.0","_npmVersion":"11.1.0","dist":{"integrity":"sha512-2rDAQntDX0HGFR0H25eUAlI3+jMnuPPz/xUUzwZxnvLqZvquo2Qiq1R9kyyoM1N2N5BFWKUWn/T3yUvQCoBHlg==","shasum":"fea2529360007756486fcb4a60a2a5f4962f8fb2","tarball":"https://registry.npmjs.org/@4399ywkf/form-render/-/form-render-1.14.2.tgz","fileCount":108,"unpackedSize":687691,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQD/wJ68ZSRqDmAH2K3zrJnWN9b92cBhLDxNatBQeJNNkgIhANgjldnUcoCiK92/Udku71NKy3QFwyggJkyJ6KfX1EqL"}]},"_npmUser":{"name":"ywjszx","email":"ywjszx@4399.com"},"directories":{},"maintainers":[{"name":"ywjszx","email":"ywjszx@4399.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/form-render_1.14.2_1755509206956_0.5009007835187815"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-18T09:10:21.868Z","modified":"2025-08-18T09:26:47.354Z","1.14.0":"2025-08-18T09:10:22.149Z","1.14.1":"2025-08-18T09:12:54.248Z","1.14.2":"2025-08-18T09:26:47.153Z"},"bugs":{"url":"https://github.com/alibaba/x-render/issues"},"license":"MIT","homepage":"https://xrender.fun/form-render","keywords":["Form","FormRender","Render","XRender","React","Json Schema","Ant Design"],"repository":{"type":"git","url":"git+ssh://git@github.com/alibaba/form-render.git"},"description":"通过 JSON Schema 生成标准 Form，常用于自定义搭建配置界面生成","contributors":[{"name":"Tw93","email":"tw93@qq.com"},{"name":"mankaiviky","email":"mankaiviky@163.com"},{"name":"FateRiddle","email":"fateriddle@gmail.com"}],"maintainers":[{"name":"ywjszx","email":"ywjszx@4399.com"}],"readme":"
\n \"logo\"\n

FormRender

\n
\n

\n \n \"npm\"\n \n \n \"NPM\n \n \n \"NPM\n \n \n \"PRs\n \n

\n\n> 一站式中后台**表单解决方案**\n\n## 官网\n\n\n\nFormRender 1.0 是下一代的 `React.js` 表单解决方案。项目从内核级别进行了重写，为了能切实承接日益复杂的表单场景需求。我们的目标是以强大的扩展能力对表单场景 100%的覆盖支持，同时保持开发者能快速上手，并以表单编辑器、插件、自定义组件等一系列周边产品带来极致的开发体验。在开发 1.0 的道路上，我们做了一系列的取舍，详见[0.x - 1.0 迁移文档](https://xrender.fun/form-render/migrate)\n\n\n\n## 安装\n\nFormRender 依赖 ant design，单独使用不要忘记同时安装 `antd`\n\n```shell\nnpm i form-render --save\n```\n\n## 使用\n\n**最简使用 demo：**\n\n```jsx\nimport React from 'react';\nimport { Button } from 'antd';\nimport FormRender, { connectForm } from 'form-render';\n\nconst schema = {\n type: 'object',\n properties: {\n input1: {\n title: '简单输入框',\n type: 'string',\n required: true,\n },\n select1: {\n title: '单选',\n type: 'string',\n enum: ['a', 'b', 'c'],\n enumNames: ['早', '中', '晚'],\n },\n },\n};\n\nclass Demo extends React.Component {\n render() {\n const { form } = this.props;\n return (\n
\n \n \n
\n );\n }\n}\n\nexport default connectForm(Demo);\n```\n\n**对于函数组件，FormRender 提供了 `useForm` hooks, 书写更为灵活**\n\n```jsx\nimport React from 'react';\nimport { Button } from 'antd';\nimport FormRender, { useForm } from 'form-render';\n\nconst schema = {\n type: 'object',\n properties: {\n input1: {\n title: '简单输入框',\n type: 'string',\n required: true,\n },\n select1: {\n title: '单选',\n type: 'string',\n enum: ['a', 'b', 'c'],\n enumNames: ['早', '中', '晚'],\n },\n },\n};\n\nconst Demo = () => {\n const form = useForm();\n return (\n
\n \n \n
\n );\n};\n\nexport default Demo;\n```\n\n**从 demo 中我们不难发现 FormRender 的一些设计：**\n\n1. 以 schema 来描述表单展示，提交方式与 antd v4 的方式类似\n2. schema 以国际标准的 JSON schema 为基础，同时能够方便使用任何 antd 的 props\n3. 通过 bind 字段，我们允许数据的双向绑定，数据展示和真实提交的数据可以根据开发需求不同（例如从服务端接口拿到不规则数据时，也能直接使用）\n4. 可以通过`displayType`,`labelWidth`等字段轻易修改展示\n\n## 组件 Props\n\n```js\nimport Form, { useForm, connectForm } from 'form-render';\n```\n\n### \\
(常用 props)\n\n| 参数 | 描述 | 类型 | 是否必填 | 默认值 |\n| ---------------- | ------------------------------------------------------------------------------ | -------------------------------------------------------------------- | -------- | -------- |\n| id | 表单的 id，一般用于标识一个表单的语义化名称 | `string`/`number` | 否 | |\n| schema | 描述表单的 schema，详见 | `object` | 是 | |\n| form | `useForm`创建的表单实例，与 Form 一对一绑定 | `FormInstance` | 是 | |\n| onFinish | 提交后的回调，执行 form.submit() 后触发 | `(data, errors: Error[]) => void` | 否 | () => {} |\n| beforeFinish | 在 onFinish 前触发，一般用于外部校验逻辑的回填，入参是个对象，便于扩展 | `({ data, errors, schema, ...rest }) => Error[] 或 Promise` | 否 | () => {} |\n| onMount | 表单首次加载时触发，详见[生命周期](/form-render/advanced/life-cycle) | `() => void` | 否 | () => {} |\n| displayType | 表单元素与 label 同行 or 分两行展示, inline 则整个展示自然顺排 | `string('column' / 'row' / 'inline')` | 否 | 'column' |\n| labelAlign | label 标签的文本对齐方式 | `string('left' / 'right')` | 否 | 'right' |\n| colon | 表示是否显示 label 后面的冒号 | `boolean` | 否 | true |\n| widgets | 自定义组件，当内置组件无法满足时使用 | `object` | 否 | {} |\n| watch | 类似于 vue 的 watch 的用法，详见[表单监听 & 回调](/form-render/advanced/watch) | `object` | 否 | {} |\n| removeHiddenData | 提交数据的时候是否去掉已经被隐藏的元素的数据，默认不隐藏 | `boolean` | 否 | true |\n| debug | 开启 debug 模式，时时显示表单内部状态，**开发的时候强烈建议打开** | `boolean` | 否 | false |\n| readOnly | 只读模式，一般用于预览展示，全文 text 展示 | `boolean` | 否 | false |\n\n注 1：\n\n### \\ (不常用 props)\n\n| 参数 | 描述 | 类型 | 默认值 |\n| -------------------- | ---------------------------------------------------------------- | ------------------- | ------ |\n| className (v.1.6.12) | 顶层 className | `string` | '' |\n| style (v.1.6.12) | 顶层 style | `object` | {} |\n| column | 一行展示多少列 | `number` | 1 |\n| mapping | schema 与组件的映射关系表，当内置的表不满足时使用 | `object` | {} |\n| disabled | 禁用模式，全部表单元素禁用 | `boolean` | false |\n| debugCss | 用于 css 问题的调整，显示 css 布局提示线 | `boolean` | false |\n| locale | 展示语言，目前只支持中文、英文 | `string('cn'/'en')` | 'cn' |\n| configProvider | antd 的 configProvider，配置透传 | `object` | - |\n| allCollapsed | 对象组件是否默认折叠（全局） | `boolean` | false |\n| debounceInput | 是否开启输入时使用快照模式。仅建议在表单巨大且表达式非常多时开启 | `boolean` | false |\n| validateMessages | 修改默认的校验提示信息。详见下 | `object` | {} |\n\n#### validateMessages\n\n`Form` 为验证提供了[默认的错误提示信息](https://github.com/alibaba/x-render/blob/master/packages/form-render/src/validateMessageCN.js)，你可以通过配置 `validateMessages` 属性，修改对应的提示模板。一种常见的使用方式，是配置国际化提示信息：\n\n```js\nconst validateMessages = {\n required: '${title}是必选字段',\n // ...\n};\n\n;\n```\n\n目前可以用的转义字段为 `${title}`/`${min}`/`${max}`/`${len}`/`${pattern}`, 如果有更多需求请提 [issue](https://github.com/alibaba/x-render/issues/new/choose)\n\n### useForm / connectForm\n\n`useForm` / `connectForm` 用于创建表单实例，所有对表单的外部操作和回调函数全挂在其生产的实例上,例如表单提交是 `form.submit`。注意 `useForm` 是 hooks，而 `connectForm` 是高阶组件，所以前者只能在函数组件使用，后者可用于 class 组件。两者无其他区别。使用时需要创建实例，并通过 props 挂钩到与其对应的表单上：\n\n```js\nimport Form, { useForm } from 'form-render';\n\nconst Demo = () => {\n const form = useForm();\n return ;\n};\n```\n\n```js\nimport Form, { connectForm } from 'form-render';\n\nconst Demo = ({ form }) => {\n return ;\n};\n\nexport default connectForm(Demo);\n```\n\n**form 方法**\n\n| 参数 | 描述 | 类型 |\n| ---------------- | --------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |\n| submit | 触发提交流程，一般在提交按钮上使用 | `() => void` |\n| resetFields | 清空表单（也会清空一些内置状态，例如校验） | `({formData?: any, submitData?: any, errorFields?: Error[], touchedKeys?: any[], allTouched?: boolean}) => void` |\n| errorFields | 表单校验错误的数组 | `array,[{name, error: []}]` |\n| setErrorFields | 外部手动修改 errorFields 校验信息，用于外部校验回填 | `(error: Error[]) => void` |\n| setValues | 外部手动修改 formData，用于已填写的表单的数据回填 | `(formData: any) => void` |\n| onItemChange | 外部修改指定单个 field 的数据 | `(path: string, value: any) => void` |\n| getValues | 获取表单内部维护的数据 formData | `() => void` |\n| schema | 表单的 schema | object |\n| touchedKeys | 已经触碰过的 field 的数据路径 | `string[]` |\n| removeErrorField | 外部手动删除某一个 path 下所有的校验信息 | `(path: string) => void` |\n| formData | 表单内部维护的数据，建议使用 getValues/setValues | `object` |\n","readmeFilename":"README.md"}