title: Form 表单 nav: title: 组件 path: /components order: 1 group: title: ' ' order: 10

Form 表单

可配置表单控件。

使用

import Form from '@monsterooo/form';

const fields = [
  {
    key: 'key1',
    name: 'key1',
  },
];

<Form fields={fields} />;

代码演示

基本用法

固定宽度布局

输入框组合

自定义类型

API

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | fields | 表单元素字段配置 | FormField[] | - | | nextFields | 动态修改 fields 中渲染节点的属性 | FormField[] | - | | labelWidth | FormItem label 宽度，当设置此属性时， labelCol属性将失效 | string | number | - | | fieldRow | 表单元素布局，同 <Row> 组件，此属性在 layout 为horizontal时有效 | object | - | | fieldCol | 表单元素布局，同 <Col> 组件，设置 span offset 值，如 {span: 3, offset: 12} 或 sm: {span: 3, offset: 12}。 此属性在 layout 为horizontal时有效 | object | - | | fieldTypes | 自定义渲染类型 | object | - | | placeholderPrefix | 表单元素 placeholder 生成规则，可覆盖内置规则。内置规则见 | object | - |

其他属性见 antd Form

FormField

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | key | 字段名，支持数组 | NamePath | - | | name | label 标签的文本 | ReactNode | - | | type | 渲染类型 | string | input | | valueType | 格式化返回值。传入getValueFromEvent后该属性将失效。详细说明见下 | 'array' | 'empty' | 'unknown' | - | | props | 组件属性，透传给对应 type 的组件。 | object | (value: any, currValues: any) => object | - | | visible | 控制表单元素是否显示(不会收集值和校验)。同时保留hidden属性（会收集值和校验），visible 属性优先级最高。 | boolean | (value: any, currValues: any) => boolean | - | | labelWidth | 同 Form labelWidth | string |number | - | | fieldRow | 同 Form fieldRow | object | - | | fieldCol | 同 Form fieldCol | object | - | | message | 配置校验规则 required 的提示信息, 默认使用 placeholder | string | - | | render | 渲染函数。优先级高于type， props 参数需要传递给返回的组件, 形如render: (props: any) => <CustomedInput {...props} /> | (props) => ReactNode | - |

其他属性见 antd Form.Item

ValueType

手动转化表单返回值，仅在使用 form.getFieldsValue()生效。

| 类型 | 说明 | | ------- | ------------------------------------- | | array | 将非undefined, null的值转化为数组 | | empty | 将undefined, null转化为'' | | unknown | 将undefined, null转化为UNKNOWN |

Field

type 来自内置或自定义类型。其他属性为其对应的组件 props(透传给组件)

import Form from '@monsterooo/form';

<Form.Field type="number" placeholder="请输入" />;

placeholder 生成规则

| 规则 | 结果 | | --------------------- | ------ | | 以 input 结尾 | 请输入 | | number、textarea | 请输入 | | 以 select 结尾 | 请选择 | | checkbox 或 radio | 请选择 |

默认类型

| type | 说明 | 对应组件 | | ---------- | ---------- | ------------- | | input | 文本输入框 | Input | | number | 数字输入框 | InputNumber | | select | 下拉选择器 | Select | | datepicker | 日期选择器 | DatePicker |