cjd-parkball/src/components/formBuilder/index.md

> 中后台业务组件库，中后台就像公园，进入需要买门票（登录），所以以 Parkball(公园球) 命名，公园内必定捕获！作为一个组件库，提供使用方法文档，方便开发者的调用

---
title: 表单生成器
title_en:  FormBuilder
name: formBuilder
publishDate: 2018-7-23
category: 1
order: 2
description: 通过配置生成表单
---

 何时使用

* 需要用户提交一些表单信息

## 实例方法

通过 ref 调用 formbuilder 实例方法

* getReadyValue
  若所有校验项通过，返回 { values, form}, 若有检验项不通过则返回 false
* getFieldsValue
  获取当前校验结果，返回 {err, values}
* setFieldsValue
  设置 fields 的值


## FormBuilder

`Formbuilder` 仅作为容器使用，内部 field 请使用 `Fields` 或 `Field`

# field

通用参数

| 名称 | 描述       | 默认值     |
| ---- | ---------- | -------- |
| type | 表单元素类型: `text`,`number`,`select`,`cascader`,`textarea`,`radio`,`checkbox`,`date`,`dateTime`,`time`,`custom`,`upload`, 不支持的 type 会尝试用 input 接收 | `text` |
| initialValue | 默认值 | null |
| label | 字段显示文本 | '' |
| name | 字段名 | '' |
| placeholder | 默认提示文案 | 根据type有不同的默认值 |
| required | 是否必填 | true |
| emptyMessage | 为空时文案 | 根据type有不同的默认值 |
| hide | 隐藏字段 [`<field>`] | null |
| valueKey | 指定 value 字段 | 'value' |
| labelKey | 指定 label 字段 | 'label' |
| validator | 额外校验逻辑 | null |
| setter | 获取值逻辑 | Function(value){} |
| getter | 回填值逻辑 | Function(value){} |

> text, textarea

| 名称 | 描述       | 默认值     |
| ---- | ---------- | -------- |
| initialValue | 默认值 | null |


> select

| 名称 | 描述       | 默认值     |
| ---- | ---------- | -------- |
| url | 异步获取数据的接口 | null |
| options | 预设值范围 | null |
| optionChild | 单项 option  | null |
| onSelect | 选中时的回调 | null |



> date、time、datetime

| 名称 | 描述       | 默认值     |
| ---- | ---------- | -------- |
| format | 时间格式 | date：'YYYY-MM-DD', dateTIime: 'YYYY-MM-DD HH:ss:mm', time: 'HH:ss:mm'|

> upload

| 名称 | 描述       | 默认值     |
| ---- | ---------- | -------- |
| uploadText | 上传文案 | 请上传 |
| listType | 上传展现类型 `picture`, `text` |picture |


> custom

| 名称 | 描述       | 默认值     |
| ---- | ---------- | -------- |
| customNode | 自定义节点 | null |

> hidden
| 名称 | 描述       | 默认值     |
| ---- | ---------- | -------- |
| initialValue | 默认值 | null |
| 其他属性同 input | - | - |


## Fields
``` javascript
import { FormBuilder } from '@terminus/parkball'
const { Fields } = FormBuilder
```
可以在 formbuidler 的 children 环境内任意使用生成 field

| 名称 | 描述       | 默认值     |
| ---- | ---------- | -------- |
| fields | 表单元素集合 | `<Array>[field]` |
| column | 表单有几列，1或2 | 1 |