@hi-ui/form

Form 表单

用来收集数据的组件集合

何时使用

当系统需要收集、录入时

常见于调查问卷、登录、新建/编辑、设置等场景

使用示例

Props

Form

参数	说明	类型	可选值	默认值
initialValues	表单默认值，只有初始化以及重置时生效；该值是不受控的，和表单中的 defaultValue 的作用相同	object	-	-
rules	表单验证规则，用法参考 async-validator	object	-	-
labelWidth	label 宽度，可用任意 CSS 长度单位	string
labelPlacement	label 放置的位置	string	'right' | 'left' | 'top'	'left'
placement	是否横向排列	string	'horizontal' | 'vertical'	'vertical'
showColon	是否显示冒号	boolean	true | false	true
innerRef	提供辅助方法的内部引用	React.RefObject<FormHelpers>	-	-

Events

名称	说明	类型	参数	返回值
onValuesChange	字段值更新时触发回调事件	(changedValues: object, allValues: object) => void	changedValues: 改变的表单对象 allValues: 所有表单项对象	-

SchemaForm

继承 Form API

参数	说明	类型	可选值	默认值
schema	通过 schema 渲染表单	SchemaItem[]	-	-
submit	继承 Form.Submit API	Object	-	-
reset	继承 Form.Reset API	Object	-	-

FormList

参数	说明	类型	可选值	默认值
name	列表名称	String	-	-
children	渲染函数	(fields: Field[], operation: { add, remove }) => React.ReactNode	-	-

Form.Item

参数	说明	类型	可选值	默认值
field	字段名，支持数组	string	(string)[]	-
name	在Form.List的嵌套表单中；表示该项的属性名称	string	-	-
row	在Form.List 表示列表的第几行, 设置指定列表表单项时有用	any	-	-
label	标签文本，默认自动添加冒号	string	-	-
labelWidth	label 宽度，可用任意 CSS 长度单位，优先级高于 Form 设置的 labelWidth	string
required	是否必填	boolean	true | false	false
showColon	是否显示冒号	boolean	true | false	-
rules	表单验证规则，会覆盖 Form 设置的 rules，用法参考 async-validator	object	-	-
valuePropName	子节点的值的属性，如 Switch Radio Checkbox 的是 'checked'	string	-	'value'
contentPosition	指定显示内容的位置的位置，对一些非 HiUI 表单组件进行设置	string	'top' | 'center' |'bottom'	'center'

SchemaItem

继承 Form.Item API

参数	说明	类型	可选值	默认值
component	用于渲染的组件名称(现在组件名称，只限于 HiUI 中的组件名）；如果传入 ReactNode 的情况下，componentProps 属性失效，同时也会默认控制组件 value 属性	string | ReactNode	-	-
componentProps	组件的属性	string	-	-

Form.Submit

继承 Button API

参数	说明	类型	可选值	默认值
onClick	点击提交后触发 Function(value: Object, errors: Object) => void	Function	-	func.noop
fields	需要校验的 field 字段，不传入的话就是默认全部校验	Array	-	-

Form.Reset

继承 Button API

参数	说明	类型	默认值
onClick	点击提交后触发 () => void	Function	func.noop
fields	需要重置的 field 字段，不传入的话就是默认全部重置	Array	-
toDefault	返回默认值	Boolean	true

Methods

方法名	说明
validate(callback: (fields: Object, errors: Object) => void, fields:Array)	对整个表单进行校验, 对应 Form.Submit中的 API
validateField(fields: []string, callback: errors => void)	对指定表单字段进行校验
resetValidates(callback:() => void, fields:Array, toDefault:boolean)	重置整个表单的验证,对应 Form.Reset中的 API
setFieldsValue(field: Object)	设置表单的值，在异步获取的数据回显的时候，使用该方法
setListItemFieldsValue(ListItemInfo: Object)	设置表单中 From.List 的指定项的值 ListItemInfo
getFieldsValue( fields: Object ) => Object	获取一组字段名对应的 Values 返回为数组形式, 不传入 fields；默认返回全部信息, 不会触发表单校验
getFieldsError( fields: []string ) => Object	获取一组字段名对应的错误信息，返回为数组形式, 不传入 fields；默认返回全部信息
clearValidates( fields: []string ) => void	移除表单项的校验结果。传入待移除的表单项的 field 属性组成的数组，如不传则移除整个表单的校验结果
updateFormSchema( schemaData: {fileName: SchemaItem } ) => void	当 SchemaItem 中对应的 schema 数据更新时，请调用该方法更新

ListItemInfo

参数	说明	类型	可选值	默认值
name	对应 Form.Item 中的 name，在列表项中的属性名称	string	-	-
listname	需要更新的列表名称	string	-	-
row	对应 Form.Item 中的 row，表示列表的第几行	string	-	-
value	需要更新的值	any	-	-

Rules

更多规则

名称	说明	类型
enum	是否匹配枚举中的值	any[]
len	string 类型时为字符串长度；number 类型时为确定数字； array 类型时为数组长度	number
max	必须设置 type：string 类型为字符串最大长度；number 类型时为最大值；array 类型时为数组最大长度	number
message	错误信息	string
min	必须设置 type：string 类型为字符串最小长度；number 类型时为最小值；array 类型时为数组最小长度	number
pattern	正则表达式匹配	RegExp
required	是否为必选字段	boolean
transform	将字段值转换成目标值后进行校验	(value) => any
type	类型，常见有 string |number |boolean | email。更多请参考此处	string
validator	自定义校验	(rule,value,callback) => void
whitespace	如果字段仅包含空格则校验不通过	boolean

CHANGELOG

Form

参数	变更类型	变更内容	解决的问题
propName	feature | deprecated | update	变更了什么	之前是什么样子，解决什么问题
----	----	----	----
innerRef	update	ref -> innerRef	解决名字占用，ref 功能作为 dom 引用获取，回调方法写法支持 Promise
initialErrors	feature	-	强化功能
initialTouched	feature	-	强化功能
validateTrigger	feature	-	强化功能
validateAfterTouched	feature	-	强化功能
lazyValidate	feature	-	强化功能
onSubmit	feature	-	强化功能
onReset	feature	-	强化功能

FormItem

参数	变更类型	变更内容	解决的问题
propName	feature | deprecated | update	变更了什么	之前是什么样子，解决什么问题
----	----	----	----
required	update	定义：只做展示，不做校验	优化功能
valueType	feature	-	强化功能
valueChangeFuncPropName	feature	-	强化功能
valueDispatchTransform	feature	-	强化功能
valueConnectTransform	feature	-	强化功能
validateTrigger	feature	-	强化功能
render	feature	支持函数自定义渲染表单控件	强化功能

FormList

参数	变更类型	变更内容	解决的问题
propName	feature | deprecated | update	变更了什么	之前是什么样子，解决什么问题
----	----	----	----
children	feature	(fields: Field[], operation: { add, remove }) => React.ReactNode -> (fields: Field[], operation: { add, remove, swap, insertBefore, move }) => React.ReactNode	强化支持

SchemeForm

SchemaItem 内部废弃，作为物料高级组件进行扩展