@monsterooo/form

---

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