# vformrender

> - 本组件是在[xrender](https://xrender.fun/form-render) 基础上，根据业务需求进行了二次封装，增加了文件上传等组件

Latest version **1.0.1** (published 2022-08-08) · ISC license · 0 weekly downloads

## Install

```sh
npm install vformrender
pnpm add vformrender
yarn add vformrender
bun add vformrender
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2022-08-08 |
| First published | 2022-08-08 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 79.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | hedyma |
| Maintainers | hedyma |

## Links

- npm: https://www.npmjs.com/package/vformrender
- Repository: https://git.vackbot.com/moui/components/vformrender
- npm.io page: https://npm.io/package/vformrender

## Dependencies (3)

- [antd](https://npm.io/package/antd.md) ^4.22.3
- [react](https://npm.io/package/react.md) ^18.2.0
- [form-render](https://npm.io/package/form-render.md) ^1.13.11

## Recent versions

- 1.0.1 (latest) — 2022-08-08
- 1.0.0 — 2022-08-08

## README

# VFormRender 与 Form Render(xrender)

- 本组件是在[xrender](https://xrender.fun/form-render) 基础上，根据业务需求进行了二次封装，增加了文件上传等组件

## xrender 官网及示例

>  [xrender 官网](https://xrender.fun/form-render) | [antd](https://ant.design/components/form-cn/) |
>  [xrender 官网-Schema 示例（基础组件、验证、联动等完整示例）](https://xrender.fun/playground)

## 前言

>  1、v* (小写 v* )开头的属性为 自定义属性  
>  2、V（大写 V ）开头的组件为 自定义组件  
>  3、schema 最顶层的 type 总是 object  

## 使用方法

> 1、安装依赖
>  [form-render](https://github.com/alibaba/x-render)  antd   
> 2、引入 components/VFormRender  
> 3、修改 config.js 中 ajaxUpload（文件上传）函数  
> 4、完成可以直接使用了。

## Props

| 参数   | 说明          | 类型     | 默认值 |
| ------ | ------------- | -------- | ------ |
| schema | 要渲染的 JSON | `object` | -      |

## FormInstance

| 名称 | 说明 | 类型 | 版本 |
| --- | --- | --- | --- |
| submit | 触发表单验证并提交，_与 FormRender 略有不同，该组件进行了默认值处理，提交时不论有无值都会提供默认值，保证存在定义的全部字段_ | () => Promise | - |
| getValues | 获取表单内部维护的数据 formData | `string` | - |

## json schema

[schema 属性详细列表](https://xrender.fun/form-render/api/schema)

### 常用属性

- **type** 类型
- **properties** 属性
- **title** 标题
- **description** 说明
- **enum** 选项值
- **enumNames** 选项名

### 表达式

- **hidden** 隐藏 | **readOnly** 只读 | **disabled** 禁用
- 如： `"hidden":"{{formData.xx=='xx'}}"` 或者 `"readOnly":"{{formData.xx=='xx'}}" `
- **注意：** 列表内的用 `"hidden":{{rootValue.xx=='xx'}}"`

### 验证相关

- **format**
- - `url` | `email`
- **min**
- - 当 `type` 为 `array` 时，代表最小项数；当 `type` 为 `string` 时，代表最少字数；当 `type` 为 `number` 时，代表最小值。

- **max**
- - 当 `type` 为 `array` 时，代表最大项数；当 `type` 为 `string` 时，代表最多字数；当 `type` 为 `number` 时，代表最大值。

- **required**
- - `boolean` 是否必填
- **rules** [] 正则校验，支持多条
- 示例

```json
"rules": [
        {
          "pattern": "^[a-z]+$",
          "message":"仅支持英文字母"
        }
        ]
```

### 其他

- **props**
- 当基础字段不够描述组件的展示时，使用 `props` 字段作为扩展。`props` 的具体属性可以查询 [antd](https://ant.design/components/input-cn/) 的对应组件文档。所有 `props` 中的属性都会直接透传给组件。

- 如 文本框显示为密码类型，最大长度 10

```json
{
  "type": "object",
  "properties": {
    "input_kn6fk0": {
      "title": "输入框",
      "type": "string",
      "props": {
        "type": "password",
        "maxLength": 10
      }
    }
  }
}
```

### 完整示例

```jsx
import React, { useState, useRef } from 'react';
import { Input, Form, Button } from 'antd';
import VFormRender from '@/components/VFormRender';

const App = () => {
  const formRenderRef = useRef();
  const [schema] = useState({
    type: 'object',
    properties: {
      AllString: {
        title: 'string类',
        type: 'object',
        properties: {
          input: {
            title: '简单输入框',
            type: 'string',
            placeholder: '昵称',
          },
          textarea: {
            title: '简单文本编辑框',
            type: 'string',
            format: 'textarea',
          },
          color: {
            title: '颜色选择',
            type: 'string',
            format: 'color',
          },
          image: {
            title: '图片展示',
            type: 'string',
            format: 'image',
            default: 'http://placekitten.com/200/300',
          },
          uploader: {
            title: '上传文件',
            type: 'string',
            format: 'upload',
            props: {
              action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
            },
          },
          treeSelect: {
            title: '树形选择',
            type: 'string',
            widget: 'treeSelect',
            props: {
              treeDefaultExpandAll: true,
              treeData: [
                {
                  title: 'Node1',
                  value: '0-0',
                  key: '0-0',
                  children: [
                    {
                      title: 'Child Node1',
                      value: '0-0-1',
                      key: '0-0-1',
                    },
                    {
                      title: 'Child Node2',
                      value: '0-0-2',
                      key: '0-0-2',
                    },
                  ],
                },
                {
                  title: 'Node2',
                  value: '0-1',
                  key: '0-1',
                },
              ],
            },
          },
        },
      },
      allDate: {
        title: '时间类',
        type: 'object',
        properties: {
          date: {
            title: '日期选择',
            type: 'string',
            format: 'date',
          },
          dateTime: {
            title: '日期时间选择',
            type: 'string',
            format: 'dateTime',
          },
          time: {
            title: '时间选择',
            type: 'string',
            format: 'time',
          },
          dateRange: {
            title: '日期范围',
            type: 'range',
            format: 'dateTime',
            placeholder: ['开始时间', '结束时间'],
          },
          timeRange: {
            title: '时间范围',
            type: 'range',
            format: 'time',
          },
          year: {
            title: '年份选择',
            type: 'string',
            format: 'year',
          },
          month: {
            title: '月份选择',
            type: 'string',
            format: 'month',
          },
          week: {
            title: '周选择',
            type: 'string',
            format: 'week',
          },
          quarter: {
            title: '季度选择',
            type: 'string',
            format: 'quarter',
          },
        },
      },
      allNumber: {
        title: 'number类',
        type: 'object',
        properties: {
          number1: {
            title: '数字输入框',
            description: '1 - 1000',
            type: 'number',
            min: 1,
            required: true,
            max: 1000,
          },
          number2: {
            title: '带滑动条',
            type: 'number',
            widget: 'slider',
          },
          rate: {
            title: '评价',
            type: 'number',
            widget: 'rate',
          },
        },
      },
      allBoolean: {
        title: 'boolean类',
        type: 'object',
        properties: {
          radio: {
            title: '是否通过',
            type: 'boolean',
          },
          switch: {
            title: '开关控制',
            type: 'boolean',
            widget: 'switch',
          },
        },
      },
      allEnum: {
        title: '选择类',
        type: 'object',
        properties: {
          select: {
            title: '单选',
            type: 'string',
            enum: ['a', 'b', 'c'],
            enumNames: ['早', '中', '晚'],
            default: 'a',
            widget: 'select',
          },
          radio: {
            title: '单选',
            type: 'string',
            enum: ['a', 'b', 'c'],
            enumNames: ['早', '中', '晚'],
            widget: 'radio',
          },
          multiSelect: {
            title: '多选',
            description: '下拉多选',
            type: 'array',
            required: true,
            items: {
              type: 'string',
            },
            enum: ['A', 'B', 'C', 'D'],
            enumNames: ['杭州', '武汉', '湖州', '贵阳'],
            widget: 'multiSelect',
          },
          boxes: {
            title: '多选',
            description: 'checkbox',
            type: 'array',
            items: {
              type: 'string',
            },
            enum: ['A', 'B', 'C', 'D'],
            enumNames: ['杭州', '武汉', '湖州', '贵阳'],
            widget: 'checkboxes',
          },
        },
      },
      listName2: {
        title: '对象数组',
        description: '对象数组嵌套功能',
        type: 'array',
        min: 1,
        max: 3,
        items: {
          type: 'object',
          properties: {
            input1: {
              title: '简单输入框',
              type: 'string',
            },
            select1: {
              title: '单选',
              type: 'string',
              enum: ['a', 'b', 'c'],
              enumNames: ['早', '中', '晚'],
            },
          },
        },
      },
    },
  });
  //提交表单
  const renderSubmit = () => {
    formRenderRef.current
      ?.submit()
      .then(({ data, errors }) => {
        alert('验证已通过，详细数据请看F12控制台');
        console.log('验证已通过：formData:', data, 'errors', errors);
      })
      .catch(({ data, errors }) => {
        alert('验证未通过，详细数据请看F12控制台');
        console.log('验证未通过：formData:', data, 'errors', errors);
      });
  };
  return (
    <>
      <VFormRender ref={formRenderRef} schema={schema} displayType="row" debug={false} />
      <Button type="primary" onClick={renderSubmit}>
        提交
      </Button>
    </>
  );
};

export default App;
```

---
_Source: https://npm.io/package/vformrender · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._