doc: add form demo

components/form/demo/basic.vue

@@ -51,7 +51,6 @@ Basic Form data control. Includes layout, initial values, validation and submit.
 </template>
 <script lang="ts">
 import { defineComponent, reactive } from 'vue';
-import type { UnwrapRef } from 'vue';
 
 interface FormState {
   username: string;
@@ -60,7 +59,7 @@ interface FormState {
 }
 export default defineComponent({
   setup() {
-    const formState: UnwrapRef<FormState> = reactive({
+    const formState = reactive<FormState>({
       username: '',
       password: '',
       remember: true,

components/form/demo/custom-validation.vue

@@ -47,7 +47,6 @@ See more advanced usage at [async-validator](https://github.com/yiminghe/async-v
 <script lang="ts">
 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;
@@ -57,7 +56,7 @@ interface FormState {
 export default defineComponent({
   setup() {
     const formRef = ref<FormInstance>();
-    const formState: UnwrapRef<FormState> = reactive({
+    const formState = reactive<FormState>({
       pass: '',
       checkPass: '',
       age: undefined,

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

@@ -15,7 +15,12 @@ title:
 Add or remove form items dynamically.
 </docs>
 <template>
-  <a-form ref="formRef" :model="dynamicValidateForm" v-bind="formItemLayoutWithOutLabel">
+  <a-form
+    ref="formRef"
+    name="dynamic_form_item"
+    :model="dynamicValidateForm"
+    v-bind="formItemLayoutWithOutLabel"
+  >
     <a-form-item
       v-for="(domain, index) in dynamicValidateForm.domains"
       :key="domain.key"
@@ -56,7 +61,6 @@ Add or remove form items dynamically.
 <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 Domain {
@@ -86,7 +90,7 @@ export default defineComponent({
         sm: { span: 20, offset: 4 },
       },
     };
-    const dynamicValidateForm: UnwrapRef<{ domains: Domain[] }> = reactive({
+    const dynamicValidateForm = reactive<{ domains: Domain[] }>({
       domains: [],
     });
     const submitForm = () => {

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

@@ -0,0 +1,138 @@
+<docs>
+---
+order: 4.2
+title:
+  zh-CN: 复杂的动态增减表单项
+  en-US: Complex Dynamic Form Item
+---
+
+## zh-CN
+
+这个例子演示了一个表单中包含多个表单控件的情况。
+
+## en-US
+
+This example demonstrates the case that a form contains multiple form controls.
+
+</docs>
+<template>
+  <a-form
+    ref="formRef"
+    name="dynamic_form_nest_item"
+    :model="dynamicValidateForm"
+    @finish="onFinish"
+  >
+    <a-form-item name="area" label="Area" :rules="[{ required: true, message: 'Missing area' }]">
+      <a-select v-model:value="dynamicValidateForm.area" :options="areas" />
+    </a-form-item>
+    <a-space
+      v-for="(sight, index) in dynamicValidateForm.sights"
+      :key="sight.id"
+      style="display: flex; margin-bottom: 8px"
+      align="baseline"
+    >
+      <a-form-item
+        :name="['sights', index, 'value']"
+        label="Sight"
+        :rules="{
+          required: true,
+          message: 'Missing sight',
+        }"
+      >
+        <a-select
+          v-model:value="sight.value"
+          :disabled="!dynamicValidateForm.area"
+          :options="(sights[dynamicValidateForm.area] || []).map(a => ({ value: a }))"
+          style="width: 130px"
+        ></a-select>
+      </a-form-item>
+      <a-form-item
+        label="Price"
+        :name="['sights', index, 'price']"
+        :rules="{
+          required: true,
+          message: 'Missing price',
+        }"
+      >
+        <a-input v-model:value="sight.price" />
+      </a-form-item>
+      <MinusCircleOutlined @click="removeSight(sight)" />
+    </a-space>
+    <a-form-item>
+      <a-button type="dashed" block @click="addSight">
+        <PlusOutlined />
+        Add sights
+      </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, watch } from 'vue';
+import type { FormInstance } from 'ant-design-vue';
+
+interface Sights {
+  value: string;
+  price: string;
+  id: number;
+}
+export default defineComponent({
+  components: {
+    MinusCircleOutlined,
+    PlusOutlined,
+  },
+  setup() {
+    const areas = [
+      { label: 'Beijing', value: 'Beijing' },
+      { label: 'Shanghai', value: 'Shanghai' },
+    ];
+
+    const sights = {
+      Beijing: ['Tiananmen', 'Great Wall'],
+      Shanghai: ['Oriental Pearl', 'The Bund'],
+    };
+
+    const formRef = ref<FormInstance>();
+    const dynamicValidateForm = reactive<{ sights: Sights[]; area: string }>({
+      sights: [],
+      area: undefined,
+    });
+    watch(
+      () => dynamicValidateForm.area,
+      () => {
+        dynamicValidateForm.sights = [];
+      },
+    );
+    const removeSight = (item: Sights) => {
+      let index = dynamicValidateForm.sights.indexOf(item);
+      if (index !== -1) {
+        dynamicValidateForm.sights.splice(index, 1);
+      }
+    };
+    const addSight = () => {
+      dynamicValidateForm.sights.push({
+        value: undefined,
+        price: undefined,
+        id: Date.now(),
+      });
+    };
+    const onFinish = values => {
+      console.log('Received values of form:', values);
+      console.log('dynamicValidateForm:', dynamicValidateForm);
+    };
+    return {
+      formRef,
+      dynamicValidateForm,
+      onFinish,
+      removeSight,
+      addSight,
+      areas,
+      sights,
+    };
+  },
+});
+</script>

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

@@ -16,7 +16,12 @@ Bind nested fields by array name.
 
 </docs>
 <template>
-  <a-form ref="formRef" :model="dynamicValidateForm" autocomplete="off" @finish="onFinish">
+  <a-form
+    ref="formRef"
+    name="dynamic_form_nest_item"
+    :model="dynamicValidateForm"
+    @finish="onFinish"
+  >
     <a-space
       v-for="(user, index) in dynamicValidateForm.users"
       :key="user.id"
@@ -58,7 +63,6 @@ Bind nested fields by array name.
 <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 {
@@ -73,7 +77,7 @@ export default defineComponent({
   },
   setup() {
     const formRef = ref<FormInstance>();
-    const dynamicValidateForm: UnwrapRef<{ users: User[] }> = reactive({
+    const dynamicValidateForm = reactive<{ users: User[] }>({
       users: [],
     });
     const removeUser = (item: User) => {

components/form/demo/dynamic-rule.vue

@@ -0,0 +1,94 @@
+<docs>
+---
+order: 23
+title:
+  zh-CN: 动态校验规则
+  en-US: Dynamic Rules
+---
+
+## zh-CN
+
+根据不同情况执行不同的校验规则。
+
+## en-US
+
+Perform different check rules according to different situations.
+
+</docs>
+<template>
+  <a-form ref="formRef" :model="formState" name="dynamic_rule" v-bind="formItemLayout">
+    <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="Nickname"
+      name="nickname"
+      :rules="[{ required: formState.checkNick, message: 'Please input your nickname!' }]"
+    >
+      <a-input v-model:value="formState.nickname" />
+    </a-form-item>
+
+    <a-form-item name="checkNick" v-bind="formTailLayout">
+      <a-checkbox v-model:checked="formState.checkNick">Nickname is required</a-checkbox>
+    </a-form-item>
+
+    <a-form-item v-bind="formTailLayout">
+      <a-button type="primary" @click="onCheck">Check</a-button>
+    </a-form-item>
+  </a-form>
+</template>
+<script lang="ts">
+import { defineComponent, reactive, ref, watch } from 'vue';
+import type { FormInstance } from 'ant-design-vue';
+
+interface FormState {
+  username: string;
+  nickname: string;
+  checkNick: boolean;
+}
+export default defineComponent({
+  setup() {
+    const formRef = ref<FormInstance>();
+    const formState = reactive<FormState>({
+      username: '',
+      nickname: '',
+      checkNick: false,
+    });
+    watch(
+      () => formState.checkNick,
+      () => {
+        formRef.value.validateFields(['nickname']);
+      },
+      { flush: 'post' },
+    );
+    const onCheck = async () => {
+      try {
+        const values = await formRef.value.validateFields();
+        console.log('Success:', values);
+      } catch (errorInfo) {
+        console.log('Failed:', errorInfo);
+      }
+    };
+    const formItemLayout = {
+      labelCol: { span: 4 },
+      wrapperCol: { span: 8 },
+    };
+    const formTailLayout = {
+      labelCol: { span: 4 },
+      wrapperCol: { span: 8, offset: 4 },
+    };
+    return {
+      formState,
+      formItemLayout,
+      formTailLayout,
+      onCheck,
+      formRef,
+    };
+  },
+});
+</script>

components/form/demo/form-context.vue

@@ -0,0 +1,148 @@
+<docs>
+---
+order: 8
+title:
+  zh-CN: 多表单联动
+  en-US: Control between forms
+---
+
+## zh-CN
+
+本例子中，Modal 的确认按钮在 Form 之外，通过 `form.submit` 方法调用表单提交功能。反之，则推荐使用 `<Button htmlType="submit" />` 调用 web 原生提交逻辑。
+
+## en-US
+
+In this case, submit button is in the Modal which is out of Form. You can use `form.submit` to submit form. Besides, we recommend native `<Button htmlType="submit" />` to submit a form.
+
+</docs>
+<template>
+  <a-form ref="formRef" :model="formState" name="form_context" v-bind="layout" @finish="onFinish">
+    <a-form-item
+      name="group"
+      label="Group Name"
+      :rules="[{ required: true, message: 'Please input group name!' }]"
+    >
+      <a-input v-model:value="formState.group" />
+    </a-form-item>
+
+    <a-form-item label="User List">
+      <template v-if="formState.users.length">
+        <ul>
+          <template v-for="user in formState.users" :key="user.key">
+            <li class="user">
+              <a-avatar>
+                <template #icon><UserOutlined /></template>
+              </a-avatar>
+              {{ user.name }} - {{ user.age }}
+            </li>
+          </template>
+        </ul>
+      </template>
+      <template v-else>
+        <a-typography-text class="ant-form-text" type="secondary">
+          (
+          <SmileOutlined />
+          No user yet. )
+        </a-typography-text>
+      </template>
+    </a-form-item>
+
+    <a-form-item v-bind="tailLayout">
+      <a-button html-type="submit" type="primary">Submit</a-button>
+      <a-button html-type="button" style="margin: 0 8px" @click="visible = true">Add User</a-button>
+    </a-form-item>
+  </a-form>
+  <a-modal v-model:visible="visible" title="Basic Drawer" @ok="onOk">
+    <a-form ref="modalFormRef" :model="modalFormState" layout="vertical" name="userForm">
+      <a-form-item name="name" label="User Name" :rules="[{ required: true }]">
+        <a-input v-model:value="modalFormState.name" />
+      </a-form-item>
+      <a-form-item name="age" label="User Age" :rules="[{ required: true }]">
+        <a-input-number v-model:value="modalFormState.age" />
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+<script lang="ts">
+import { defineComponent, reactive, ref, watch, toRaw } from 'vue';
+import type { FormInstance } from 'ant-design-vue';
+import { SmileOutlined, UserOutlined } from '@ant-design/icons-vue';
+
+interface UserType {
+  name?: string;
+  age?: number;
+  key?: number;
+}
+
+interface FormState {
+  group: string;
+  users: UserType[];
+}
+
+export default defineComponent({
+  components: {
+    SmileOutlined,
+    UserOutlined,
+  },
+  setup() {
+    const formRef = ref<FormInstance>();
+    const modalFormRef = ref<FormInstance>();
+    const visible = ref(false);
+    const formState = reactive<FormState>({
+      group: '',
+      users: [],
+    });
+    const modalFormState = ref<UserType>({});
+
+    watch(
+      visible,
+      () => {
+        modalFormState.value = {};
+      },
+      { flush: 'post' },
+    );
+
+    const onOk = () => {
+      modalFormRef.value.validateFields().then(() => {
+        formState.users.push({ ...modalFormState.value, key: Date.now() });
+        visible.value = false;
+      });
+    };
+    const onFinish = () => {
+      console.log('Finish:', toRaw(formState));
+    };
+    const layout = {
+      labelCol: { span: 8 },
+      wrapperCol: { span: 16 },
+    };
+    const tailLayout = {
+      wrapperCol: { offset: 8, span: 16 },
+    };
+    return {
+      formState,
+      layout,
+      tailLayout,
+      formRef,
+      modalFormRef,
+      visible,
+      modalFormState,
+      onOk,
+      onFinish,
+    };
+  },
+});
+</script>
+<style>
+#components-form-demo-form-context .user {
+  margin-bottom: 8px;
+}
+
+#components-form-demo-form-context .user .ant-avatar {
+  margin-right: 8px;
+}
+
+.ant-row-rtl #components-form-demo-form-context .user .ant-avatar {
+  margin-right: 0;
+  margin-left: 8px;
+}
+</style>

components/form/demo/form-in-modal.vue

@@ -0,0 +1,97 @@
+<docs>
+---
+order: 14
+title:
+  zh-CN: 弹出层中的新建表单
+  en-US: Form in Modal to Create
+---
+
+## zh-CN
+
+当用户访问一个展示了某个列表的页面，想新建一项但又不想跳转页面时，可以用 Modal 弹出一个表单，用户填写必要信息后创建新的项。
+
+## en-US
+
+When user visit a page with a list of items, and want to create a new item. The page can popup a form in Modal, then let user fill in the form to create an item.
+
+</docs>
+<template>
+  <div>
+    <a-button type="primary" @click="visible = true">New Collection</a-button>
+    <a-modal
+      v-model:visible="visible"
+      title="Create a new collection"
+      ok-text="Create"
+      cancel-text="Cancel"
+      @ok="onOk"
+    >
+      <a-form ref="formRef" :model="formState" layout="vertical" name="form_in_modal">
+        <a-form-item
+          name="title"
+          label="Title"
+          :rules="[{ required: true, message: 'Please input the title of collection!' }]"
+        >
+          <a-input v-model:value="formState.title" />
+        </a-form-item>
+        <a-form-item name="description" label="Description">
+          <a-input v-model:value="formState.description" type="textarea" />
+        </a-form-item>
+        <a-form-item name="modifier" class="collection-create-form_last-form-item">
+          <a-radio-group v-model:value="formState.modifier">
+            <a-radio value="public">Public</a-radio>
+            <a-radio value="private">Private</a-radio>
+          </a-radio-group>
+        </a-form-item>
+      </a-form>
+    </a-modal>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, reactive, ref, toRaw } from 'vue';
+import type { FormInstance } from 'ant-design-vue';
+
+interface Values {
+  title: string;
+  description: string;
+  modifier: string;
+}
+
+export default defineComponent({
+  setup() {
+    const formRef = ref<FormInstance>();
+    const visible = ref(false);
+    const formState = reactive<Values>({
+      title: '',
+      description: '',
+      modifier: 'public',
+    });
+
+    const onOk = () => {
+      formRef.value
+        .validateFields()
+        .then(values => {
+          console.log('Received values of form: ', values);
+          console.log('formState: ', toRaw(formState));
+          visible.value = false;
+          formRef.value.resetFields();
+          console.log('reset formState: ', toRaw(formState));
+        })
+        .catch(info => {
+          console.log('Validate Failed:', info);
+        });
+    };
+
+    return {
+      formState,
+      formRef,
+      visible,
+      onOk,
+    };
+  },
+});
+</script>
+<style>
+.collection-create-form_last-form-item {
+  margin-bottom: 0;
+}
+</style>

components/form/demo/inline-login.vue

@@ -0,0 +1,91 @@
+<docs>
+---
+order: 10
+title:
+  zh-CN: 内联登录栏
+  en-US: Inline Login Form
+---
+
+## zh-CN
+
+内联登录栏，常用在顶部导航栏中。
+
+## en-US
+
+Inline login form is often used in navigation bar.
+
+</docs>
+<template>
+  <a-form
+    :model="formState"
+    name="horizontal_login"
+    layout="inline"
+    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">
+        <template #prefix>
+          <UserOutlined class="site-form-item-icon" />
+        </template>
+      </a-input>
+    </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">
+        <template #prefix>
+          <LockOutlined class="site-form-item-icon" />
+        </template>
+      </a-input-password>
+    </a-form-item>
+
+    <a-form-item>
+      <a-button :disabled="disabled" type="primary" html-type="submit">Log in</a-button>
+    </a-form-item>
+  </a-form>
+</template>
+<script lang="ts">
+import { defineComponent, reactive, computed } from 'vue';
+import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
+interface FormState {
+  username: string;
+  password: string;
+}
+export default defineComponent({
+  components: {
+    UserOutlined,
+    LockOutlined,
+  },
+  setup() {
+    const formState = reactive<FormState>({
+      username: '',
+      password: '',
+    });
+    const onFinish = (values: any) => {
+      console.log('Success:', values);
+    };
+
+    const onFinishFailed = (errorInfo: any) => {
+      console.log('Failed:', errorInfo);
+    };
+    const disabled = computed(() => {
+      return !(formState.username && formState.password);
+    });
+    return {
+      formState,
+      onFinish,
+      onFinishFailed,
+      disabled,
+    };
+  },
+});
+</script>