Form

High performance subscription-based form state management.

When To Use

When you need to create an instance to collect data.
When you need to validate fields in certain rules.

Examples

Basic

vue

<template>
  <a-form
    :model="formState"
    name="basic"
    :label-col="{ span: 8 }"
    :wrapper-col="{ span: 16 }"
    autocomplete="off"
    @finish="onFinish"
    @finishFailed="onFinishFailed"
  >
    <a-form-item
      label="Username"
      name="username"
      :rules="[{ required: true, message: 'Please input your username!' }]"
    >
      <a-input v-model:value="formState.username" />
    </a-form-item>

    <a-form-item
      label="Password"
      name="password"
      :rules="[{ required: true, message: 'Please input your password!' }]"
    >
      <a-input-password v-model:value="formState.password" />
    </a-form-item>

    <a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
      <a-checkbox v-model:checked="formState.remember">Remember me</a-checkbox>
    </a-form-item>

    <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
      <a-button type="primary" html-type="submit">Submit</a-button>
    </a-form-item>
  </a-form>
</template>

<script setup>
import { reactive } from 'vue'

const formState = reactive({
  username: '',
  password: '',
  remember: true,
})

const onFinish = (values) => {
  console.log('Success:', values)
}

const onFinishFailed = (errorInfo) => {
  console.log('Failed:', errorInfo)
}
</script>

Form Layout

vue

<template>
  <div>
    <a-form
      :layout="formLayout"
      :model="formState"
      name="basic"
      autocomplete="off"
      @finish="onFinish"
    >
      <a-form-item label="Form Layout" name="layout">
        <a-radio-group v-model:value="formLayout">
          <a-radio-button value="horizontal">Horizontal</a-radio-button>
          <a-radio-button value="vertical">Vertical</a-radio-button>
          <a-radio-button value="inline">Inline</a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="Field A">
        <a-input v-model:value="formState.fieldA" placeholder="input placeholder" />
      </a-form-item>
      <a-form-item label="Field B">
        <a-input v-model:value="formState.fieldB" placeholder="input placeholder" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit">Submit</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

const formLayout = ref('horizontal')
const formState = reactive({
  fieldA: '',
  fieldB: '',
})

const onFinish = (values) => {
  console.log('Success:', values)
}
</script>

Form Validation

vue

<template>
  <a-form
    ref="formRef"
    :model="formState"
    :rules="rules"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
  >
    <a-form-item ref="name" label="Activity name" name="name">
      <a-input v-model:value="formState.name" />
    </a-form-item>
    <a-form-item label="Activity zone" name="region">
      <a-select
        v-model:value="formState.region"
        placeholder="please select your zone"
      >
        <a-select-option value="shanghai">Zone one</a-select-option>
        <a-select-option value="beijing">Zone two</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="Activity time" required name="date1">
      <a-date-picker
        v-model:value="formState.date1"
        show-time
        type="date"
        placeholder="Pick a date"
        style="width: 100%;"
      />
    </a-form-item>
    <a-form-item label="Instant delivery" name="delivery">
      <a-switch v-model:checked="formState.delivery" />
    </a-form-item>
    <a-form-item label="Activity type" name="type">
      <a-checkbox-group v-model:value="formState.type">
        <a-checkbox value="1" name="type">Online</a-checkbox>
        <a-checkbox value="2" name="type">Promotion</a-checkbox>
        <a-checkbox value="3" name="type">Offline</a-checkbox>
      </a-checkbox-group>
    </a-form-item>
    <a-form-item label="Resources" name="resource">
      <a-radio-group v-model:value="formState.resource">
        <a-radio value="1">Sponsor</a-radio>
        <a-radio value="2">Venue</a-radio>
      </a-radio-group>
    </a-form-item>
    <a-form-item label="Activity form" name="desc">
      <a-textarea v-model:value="formState.desc" />
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button type="primary" @click="onSubmit">Create</a-button>
      <a-button style="margin-left: 10px;" @click="resetForm">Reset</a-button>
    </a-form-item>
  </a-form>
</template>

<script setup>
import { ref, reactive, toRaw } from 'vue'

const formRef = ref()
const labelCol = { span: 4 }
const wrapperCol = { span: 14 }

const formState = reactive({
  name: '',
  region: undefined,
  date1: undefined,
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

const rules = {
  name: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  region: [
    { required: true, message: 'Please select Activity zone', trigger: 'change' },
  ],
  date1: [
    { required: true, message: 'Please pick a date', trigger: 'change' },
  ],
  type: [
    {
      type: 'array',
      required: true,
      message: 'Please select at least one activity type',
      trigger: 'change',
    },
  ],
  resource: [
    { required: true, message: 'Please select activity resource', trigger: 'change' },
  ],
  desc: [
    { required: true, message: 'Please input activity form', trigger: 'blur' },
  ],
}

const onSubmit = () => {
  formRef.value
    .validate()
    .then(() => {
      console.log('values', formState, toRaw(formState))
    })
    .catch(error => {
      console.log('error', error)
    })
}

const resetForm = () => {
  formRef.value.resetFields()
}
</script>

API

Form

Property	Description	Type	Default
colon	Configure the default value of `colon` for Form.Item. Indicates whether the colon after the label is displayed (only effective when prop layout is horizontal)	boolean	true
disabled	Set form component disable, only available for antd components	boolean	false
hideRequiredMark	Hide required mark of all form items	boolean	false
labelAlign	The 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	-
labelWrap	whether label can be wrap	boolean	false
layout	Form layout	`horizontal` \| `vertical` \| `inline`	`horizontal`
model	Form data object	object	-
name	Form name. Will be the prefix of Field `id`	string	-
noStyle	No style for `true`, used as a pure field control	boolean	false
preserve	Keep field value even when field removed	boolean	true
requiredMark	Required mark style. Can use required mark or optional mark. You can not config to single Form.Item since this is a Form level config	boolean \| `optional`	true
rules	Form validation rules	object	-
scrollToFirstError	Auto scroll to first failed field when submit	boolean \| options	false
size	Set field component size (antd components only)	`small` \| `middle` \| `large`	-
validateOnRuleChange	whether to trigger validation when the `rules` prop is changed	boolean	true
validateTrigger	Config field validate trigger	string \| string[]	`change`
wrapperCol	The layout for input controls, same as `labelCol`	object	-

Form Events

Events Name	Description	Arguments
finish	Triggered after submitting the form and verifying data successfully	function(values)
finishFailed	Triggered after submitting the form and verifying data failed	function({ values, errorFields, outOfDate })
submit	Defines a function that will be called if the form data is valid.	function(e:Event)
validate	Triggered after a form item is validated	function(name, status, errorMsgs)
valuesChange	Triggered when value of any form control is changed	function(changedValues, allValues)

Form.Item

Property	Description	Type	Default
autoLink	Auto link form	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	-
labelAlign	The text align of label	`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	-
name	Field name, support array	string \| number \| (string \| number)[]	-
required	Display required style. It will be generated by the validation rule	boolean	false
rules	Rules for field validation	object \| object[]	-
tooltip	Config tooltip info	string \| slot	-
validateFirst	Whether stop validate on first rule of error for this field.	boolean	false
validateStatus	The validation status. If not provided, it will be generated by validation rule. options: `success` `warning` `error` `validating`	string	-
validateTrigger	When to validate the value of children node	string \| string[]	`change`
wrapperCol	The layout for input controls, same as `labelCol`	object	-

Form ​

When To Use ​

Examples ​

Basic ​

Form Layout ​

Form Validation ​

API ​

Form ​

Form Events ​

Form.Item ​

Form

When To Use

Examples

Basic

Form Layout

Form Validation

API

Form

Form Events

Form.Item