ant-design-vue/antdv-demo/docs/form-model/index.en-US.md

API

Form

Property	Description	Type	Default Value	Version
model	data of form component	object
rules	validation rules of form	object
hideRequiredMark	Hide required mark of all form items	Boolean	false
layout	Define form layout	'horizontal'|'vertical'|'inline'	'horizontal'
labelAlign	text align of label of all items	'left' | 'right'	'right'
labelCol	The layout of label. You can set span offset to something like {span: 3, offset: 12} or sm: {span: 3, offset: 12} same as with <Col>	object
wrapperCol	The layout for input controls, same as labelCol	object
colon	change default props colon value of Form.Item (only effective when prop layout is horizontal)	boolean	true
validateOnRuleChange	whether to trigger validation when the rules prop is changed	boolean	true

Events

Events Name	Description	Arguments
submit	Defines a function will be called if form data validation is successful.	Function(e:Event)
validate	triggers after a form item is validated	prop name of the form item being validated, whether validation is passed and the error message if not

Methods

Method	Description	Parameters
validate	validate the whole form. Takes a callback as a param. After validation, the callback will be executed with two params: a boolean indicating if the validation has passed, and an object containing all fields that fail the validation. Returns a promise if callback is omitted	Function(callback: Function(boolean, object))
validateField	validate one or several form items	Function(props: string | array, callback: Function(errorMessage: string))
resetFields	reset all the fields and remove validation result	—
clearValidate	clear validation message for certain fields. The parameter is prop name or an array of prop names of the form items whose validation messages will be removed. When omitted, all fields' validation messages will be cleared	Function(props: string | array)

Form.Item

Property	Description	Type	Default Value	Version
prop	a key of model. In the use of validate and resetFields method, the attribute is required	string
rules	validation rules of form	object | array
autoLink	Whether to automatically associate form fields. In most cases, you can use automatic association. If the conditions for automatic association are not met, you can manually associate them. See the notes below.	boolean	true
colon	Used with label, whether to display : after label text.	boolean	true
extra	The extra prompt message. It is similar to help. Usage example: to display error message and prompt message at the same time.	string|slot
hasFeedback	Used with validateStatus, this option specifies the validation status icon. Recommended to be used only with Input.	boolean	false
help	The prompt message. If not provided, the prompt message will be generated by the validation rule.	string|slot
htmlFor	Set sub label htmlFor.	string
label	Label text	string|slot
labelCol	The layout of label. You can set span offset to something like {span: 3, offset: 12} or sm: {span: 3, offset: 12} same as with <Col>	object
labelAlign	text align of label	'left' | 'right'	'right'
required	Whether provided or not, it will be generated by the validation rule.	boolean	false
validateStatus	The validation status. If not provided, it will be generated by validation rule. options: 'success' 'warning' 'error' 'validating'	string
wrapperCol	The layout for input controls, same as labelCol	object

Note

Form.Item will hijack the only child element and listen to the blur andchange events to achieve the purpose of automatic verification, so please ensure that the form field is not wrapped by other elements. If there are multiple child elements, only the first child element will be monitored for changes.

If the form field to be monitored does not meet the conditions for automatic monitoring, you can associate the form field as follows:

<a-form-model-item prop="form.name" ref="name" :autoLink="false">
  <a-input v-model="other" />
  <span>hahha</span>
  <div>
    <a-input
      v-model="form.name"
      @blur="() => {$refs.name.onFieldBlur()}"
      @change="() => {$refs.name.onFieldChange()}"
    />
  </div>
</a-form-model-item>

Validation Rules

Property	Description	Type	Default Value
trigger	When to validate the value of children node.	'blur' | 'change' | ['change', 'blur']	-
enum	validate a value from a list of possible values	string	-
len	validate an exact length of a field	number	-
max	validate a max length of a field	number	-
message	validation error message	string	-
min	validate a min length of a field	number	-
pattern	validate from a regular expression	RegExp	-
required	indicates whether field is required	boolean	false
transform	transform a value before validation	function(value) => transformedValue:any	-
type	built-in validation type, available options	string	'string'
validator	custom validate function (Note: callback must be called)	function(rule, value, callback)	-
whitespace	treat required fields that only contain whitespace as errors	boolean	false

See more advanced usage at async-validator.