Form

包含数据录入、校验以及对应样式。

演示

基础用法

基本的表单数据域控制展示，包含布局、初始化、验证、提交。数据验证采用 ph-utils/validator

行内表单

当前表单较简单时，可以在一行内放置表单。

通过设置 inline 属性为 true 可以让表单域变为行内的表单域。

只使用 FormItem

FormItem 可以不放在 Form 里面，从而进行单独使用。

对齐方式

通过设置 label-position 来应用标签和内容的对齐方式。

您可以分别设置 nt-form-item 的 label-position. 如果值为空, 则会使用 nt-form 的 label-position。

API

Form Props

参数	说明	类型	默认值
model	表单数据对象	Record<string, any>	-
rules	表单验证规则	FormRule[]	-
label-width	标签的长度，例如 50px。 作为 Form 直接子元素的 form-item 会继承该值。	string	auto
label-position	标签的位置	left、right、top	right

Form Events

事件名	说明	类型
submit	提交表单时触发	() => void

FormItem Props

参数	说明	类型	默认值
label	标签文本	string	-
required	是否为必填项，如不设置，则会根据校验规则确认	boolean	-
name	model 的键名; 使用表单校验时必填	string	-
error	表单域验证错误时的提示信息。设置该值会导致表单验证状态变为 error，并显示该错误信息。	string	-

Form Methods

方法名	说明	参数
validate	对整个表单进行校验的方法	() => void
validateField	对部分表单字段进行校验的方法	(field: string | string[]) => void
clearValidate	移除表单项的校验结果	-