mini-yu/uni_modules/tdesign-uniapp/components/form/README.en-US.md

title, description, spline, isComponent, toc

title	description	spline	isComponent	toc
Form	Form consists of input, radio, select, checkbox and so on. With form, you can collect, verify and submit data.	base	true	false

01 Component Type

Base form

{{ horizontal }}

{{ vertical }}

API

Form Props

name	type	default	description	required
custom-style	Object	-	CSS(Cascading Style Sheets)	N
colon	Boolean	false	-	N
content-align	String	left	options: left/right	N
data	Object	{}	Typescript: FormData	N
disabled	Boolean	undefined	-	N
error-message	Object	-	Typescript: FormErrorMessage	N
label-align	String	right	options: left/right/top	N
label-width	String / Number	'81px'	-	N
readonly	Boolean	undefined	-	N
required-mark	Boolean	undefined	-	N
required-mark-position	String	-	Display position of required symbols。options: left/right	N
reset-type	String	empty	options: empty/initial	N
rules	Object	-	Typescript: FormRules<FormData> type FormRules<T extends Data = any> = { [field in keyof T]?: Array<FormRule> }。see more ts definition	N
scroll-to-first-error	String	-	options: ''/smooth/auto	N
show-error-message	Boolean	true	-	N
submit-with-warning-message	Boolean	false	-	N

Form Events

name	params	description
reset	(context: { e?: FormResetEvent })	see more ts definition
submit	(context: SubmitContext<FormData>)	see more ts definition。 interface SubmitContext<T extends Data = Data> { e?: FormSubmitEvent; validateResult: FormValidateResult<T>; firstError?: string; fields?: any } type FormValidateResult<T> = boolean | ValidateResultObj<T> type ValidateResultObj<T> = { [key in keyof T]: boolean | ValidateResultList } type ValidateResultList = Array<AllValidateResult> type AllValidateResult = CustomValidateObj | ValidateResultType interface ValidateResultType extends FormRule { result: boolean } type ValidateResult<T> = { [key in keyof T]: boolean | ErrorList } type ErrorList = Array<FormRule>
validate	(result: ValidateResultContext<FormData>)	see more ts definition。 type ValidateResultContext<T extends Data> = Omit<SubmitContext<T>, 'e'>

FormInstanceFunctions 组件实例方法

name	params	return	description
clear-validate	(fields?: Array<keyof FormData>)	-	required
reset	(params?: FormResetParams<FormData>)	-	required。see more ts definition。 interface FormResetParams<FormData> { type?: 'initial' | 'empty'; fields?: Array<keyof FormData> }
set-validate-message	(message: FormValidateMessage<FormData>)	-	required。see more ts definition。 type FormValidateMessage<FormData> = { [field in keyof FormData]: FormItemValidateMessage[] } interface FormItemValidateMessage { type: 'warning' | 'error'; message: string }
submit	(params?: { showErrorMessage?: boolean })	-	required
validate	(params?: FormValidateParams)	Promise<FormValidateResult<FormData>>	required。see more ts definition。 interface FormValidateParams { fields?: Array<string>; showErrorMessage?: boolean; trigger?: ValidateTriggerType } type ValidateTriggerType = 'blur' | 'change' | 'submit' | 'all'

FormItem Props

name	type	default	description	required
custom-style	Object	-	CSS(Cascading Style Sheets)	N
arrow	Boolean	false	-	N
content-align	String	-	options: left/right	N
for	String	-	-	N
help	String	-	-	N
label	String	''	-	N
label-align	String	-	options: left/right/top	N
label-width	String / Number	-	-	N
name	String	-	-	N
required-mark	Boolean	undefined	-	N
rules	Array	-	Typescript: Array<FormRule>	N
show-error-message	Boolean	undefined	-	N

FormItem Slots

name	Description
help	-
label	-

FormRule

name	type	default	description	required
boolean	Boolean	-	-	N
date	Boolean / Object	-	Typescript: boolean | IsDateOptions interface IsDateOptions { format: string; strictMode: boolean; delimiters: string[] }。see more ts definition	N
email	Boolean / Object	-	Typescript: boolean | IsEmailOptions import type { IsEmailOptions } from '../common/common'。see more ts definition	N
enum	Array	-	Typescript: Array<string>	N
idcard	Boolean	-	-	N
len	Number / Boolean	-	-	N
max	Number / Boolean	-	-	N
message	String	-	-	N
min	Number / Boolean	-	-	N
number	Boolean	-	-	N
pattern	String / Object	-	Typescript: RegExp | string	N
required	Boolean	-	-	N
telnumber	Boolean	-	-	N
trigger	String	change	Typescript: ValidateTriggerType	N
type	String	error	options: error/warning	N
url	Boolean / Object	-	Typescript: boolean | IsURLOptions import type { IsURLOptions } from '../common/common'。see more ts definition	N
validator	Function	-	Typescript: CustomValidator type CustomValidator = (val: ValueType) => CustomValidateResolveType | Promise<CustomValidateResolveType> type CustomValidateResolveType = boolean | CustomValidateObj interface CustomValidateObj { result: boolean; message: string; type?: 'error' | 'warning' | 'success' } type ValueType = any。see more ts definition	N
whitespace	Boolean	-	-	N

FormErrorMessage

name	type	default	description	required
boolean	String	-	-	N
date	String	-	-	N
enum	String	-	-	N
idcard	String	-	-	N
len	String	-	-	N
max	String	-	-	N
min	String	-	-	N
number	String	-	-	N
pattern	String	-	-	N
required	String	-	-	N
telnumber	String	-	-	N
url	String	-	-	N
validator	String	-	-	N
whitespace	String	-	-	N

CSS Variables

The component provides the following CSS variables, which can be used to customize styles.

Name	Default Value	Description
--td-form-bg-color	@bg-color-container	-
--td-form-border-radius	0	-
--td-form-padding	0	-
--td-form-readonly-bg-color	@bg-color-secondarycontainer	-
--td-form-item-horizontal-padding	32rpx	-
--td-form-item-justify-content	space-between	-
--td-form-item-label-width	160rpx	-
--td-form-item-vertical-padding	32rpx	-