doc: add form demo

components/form/demo/basic.vue

@@ -15,83 +15,67 @@ title:
 Basic Form data control. Includes layout, initial values, validation and submit.
 </docs>
 <template>
-  <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
+  <a-form
-    <a-form-item label="Activity name">
+    :model="formState"
-      <a-input v-model:value="formState.name" />
+    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="Activity zone">
+
-      <a-select v-model:value="formState.region" placeholder="please select your zone">
+    <a-form-item
-        <a-select-option value="shanghai">Zone one</a-select-option>
+      label="Password"
-        <a-select-option value="beijing">Zone two</a-select-option>
+      name="password"
-      </a-select>
+      :rules="[{ required: true, message: 'Please input your password!' }]"
+    >
+      <a-input-password v-model:value="formState.password" />
     </a-form-item>
-    <a-form-item label="Activity time">
+
-      <a-date-picker
+    <a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
-        v-model:value="formState.date1"
+      <a-checkbox v-model:checked="formState.remember">Remember me</a-checkbox>
-        show-time
-        type="date"
-        placeholder="Pick a date"
-        style="width: 100%"
-      />
     </a-form-item>
-    <a-form-item label="Instant delivery">
+
-      <a-switch v-model:checked="formState.delivery" />
+    <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
-    </a-form-item>
+      <a-button type="primary" html-type="submit">Submit</a-button>
-    <a-form-item label="Activity 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">
-      <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">
-      <a-input v-model:value="formState.desc" type="textarea" />
-    </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">Cancel</a-button>
     </a-form-item>
   </a-form>
 </template>
 <script lang="ts">
-import { Dayjs } from 'dayjs';
+import { defineComponent, reactive } from 'vue';
-import { defineComponent, reactive, toRaw } from 'vue';
 import type { UnwrapRef } from 'vue';
 
 interface FormState {
-  name: string;
+  username: string;
-  region: string | undefined;
+  password: string;
-  date1: Dayjs | undefined;
+  remember: boolean;
-  delivery: boolean;
-  type: string[];
-  resource: string;
-  desc: string;
 }
 export default defineComponent({
   setup() {
     const formState: UnwrapRef<FormState> = reactive({
-      name: '',
+      username: '',
-      region: undefined,
+      password: '',
-      date1: undefined,
+      remember: true,
-      delivery: false,
-      type: [],
-      resource: '',
-      desc: '',
     });
-    const onSubmit = () => {
+    const onFinish = (values: any) => {
-      console.log('submit!', toRaw(formState));
+      console.log('Success:', values);
+    };
+
+    const onFinishFailed = (errorInfo: any) => {
+      console.log('Failed:', errorInfo);
     };
     return {
-      labelCol: { span: 4 },
-      wrapperCol: { span: 14 },
       formState,
-      onSubmit,
+      onFinish,
+      onFinishFailed,
     };
   },
 });

components/form/demo/custom-validation.vue

@@ -48,6 +48,7 @@ See more advanced usage at [async-validator](https://github.com/yiminghe/async-v
 import type { RuleObject } from 'ant-design-vue/es/form';
 import { defineComponent, reactive, ref } from 'vue';
 import type { UnwrapRef } from 'vue';
+import type { FormInstance } from 'ant-design-vue';
 interface FormState {
   pass: string;
   checkPass: string;
@@ -55,7 +56,7 @@ interface FormState {
 }
 export default defineComponent({
   setup() {
-    const formRef = ref();
+    const formRef = ref<FormInstance>();
     const formState: UnwrapRef<FormState> = reactive({
       pass: '',
       checkPass: '',

components/form/demo/dynamic-form-item.vue

@@ -57,6 +57,7 @@ Add or remove form items dynamically.
 import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons-vue';
 import { defineComponent, reactive, ref } from 'vue';
 import type { UnwrapRef } from 'vue';
+import type { FormInstance } from 'ant-design-vue';
 
 interface Domain {
   value: string;
@@ -68,7 +69,7 @@ export default defineComponent({
     PlusOutlined,
   },
   setup() {
-    const formRef = ref();
+    const formRef = ref<FormInstance>();
     const formItemLayout = {
       labelCol: {
         xs: { span: 24 },

components/form/demo/dynamic-form-items.vue

@@ -0,0 +1,105 @@
+<docs>
+---
+order: 4.1
+title:
+  zh-CN: 动态增减嵌套字段
+  en-US: Dynamic Form nest Items
+---
+
+## zh-CN
+
+通过数组 name 绑定嵌套字段
+
+## en-US
+
+Bind nested fields by array name.
+
+</docs>
+<template>
+  <a-form ref="formRef" :model="dynamicValidateForm" autocomplete="off" @finish="onFinish">
+    <a-space
+      v-for="(user, index) in dynamicValidateForm.users"
+      :key="user.id"
+      style="display: flex; margin-bottom: 8px"
+      align="baseline"
+    >
+      <a-form-item
+        :name="['users', index, 'first']"
+        :rules="{
+          required: true,
+          message: 'Missing first name',
+        }"
+      >
+        <a-input v-model:value="user.first" placeholder="First Name" />
+      </a-form-item>
+      <a-form-item
+        :name="['users', index, 'last']"
+        :rules="{
+          required: true,
+          message: 'Missing last name',
+        }"
+      >
+        <a-input v-model:value="user.last" placeholder="Last Name" />
+      </a-form-item>
+      <MinusCircleOutlined @click="removeUser(user)" />
+    </a-space>
+    <a-form-item>
+      <a-button type="dashed" block @click="addUser">
+        <PlusOutlined />
+        Add user
+      </a-button>
+    </a-form-item>
+    <a-form-item>
+      <a-button type="primary" html-type="submit">Submit</a-button>
+    </a-form-item>
+  </a-form>
+</template>
+
+<script lang="ts">
+import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons-vue';
+import { defineComponent, reactive, ref } from 'vue';
+import type { UnwrapRef } from 'vue';
+import type { FormInstance } from 'ant-design-vue';
+
+interface User {
+  first: string;
+  last: string;
+  id: number;
+}
+export default defineComponent({
+  components: {
+    MinusCircleOutlined,
+    PlusOutlined,
+  },
+  setup() {
+    const formRef = ref<FormInstance>();
+    const dynamicValidateForm: UnwrapRef<{ users: User[] }> = reactive({
+      users: [],
+    });
+    const removeUser = (item: User) => {
+      let index = dynamicValidateForm.users.indexOf(item);
+      if (index !== -1) {
+        dynamicValidateForm.users.splice(index, 1);
+      }
+    };
+    const addUser = () => {
+      dynamicValidateForm.users.push({
+        first: '',
+        last: '',
+        id: Date.now(),
+      });
+    };
+    const onFinish = values => {
+      console.log('Received values of form:', values);
+      console.log('dynamicValidateForm.users:', dynamicValidateForm.users);
+    };
+    return {
+      formRef,
+      dynamicValidateForm,
+      onFinish,
+      removeUser,
+      addUser,
+    };
+  },
+});
+</script>