doc: add Customized Form Controls demo

Author: tangjinzhou

components/form/demo/customized-form-controls.vue

@@ -0,0 +1,57 @@
+<docs>
+---
+order: 6.1
+title:
+  zh-CN: 自定义表单控件
+  en-US: Customized Form Controls
+---
+
+## zh-CN
+
+自定义或第三方的表单控件，也可以与 Form 组件一起使用。只要该组件注入 `useInjectFormItemContext` 并调用相应方法。
+
+## en-US
+
+Customized or third-party form controls can be used in Form, too.
+
+Controls must injects `useInjectFormItemContext` and calls the corresponding method.
+</docs>
+<template>
+  <a-form name="customized_form_controls" layout="inline" :model="formState" @finish="onFinish">
+    <a-form-item name="price" label="Price" :rules="[{ validator: checkPrice }]">
+      <PriceInput v-model:value="formState.price" />
+    </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 { defineComponent, reactive } from 'vue';
+import PriceInput from './price-input.vue';
+import type { Currency } from './price-input.vue';
+
+export default defineComponent({
+  components: {
+    PriceInput,
+  },
+  setup() {
+    const formState = reactive({
+      price: {
+        number: 0,
+        currency: 'rmb' as Currency,
+      },
+    });
+    const onFinish = (values: any) => {
+      console.log('Received values from form: ', values);
+    };
+    const checkPrice = (_: any, value: { number: number }) => {
+      if (value.number > 0) {
+        return Promise.resolve();
+      }
+      return Promise.reject(new Error('Price must be greater than zero!'));
+    };
+    return { onFinish, formState, checkPrice };
+  },
+});
+</script>

components/form/demo/index.vue

@@ -8,6 +8,7 @@
     <CustomValidation />
     <DynamicFormItem />
     <NestedForm />
+    <CustomizedFormControls />
     <UseFormBasic />
     <UseFormNested />
     <UseFormTrigger />
@@ -28,6 +29,7 @@ import UseFormNested from './useForm-nested.vue';
 import UseFormTrigger from './useForm-trigger.vue';
 import UseFormMerge from './useForm-merge.vue';
 import LableWidth from './lable-width.vue';
+import CustomizedFormControls from './customized-form-controls.vue';
 import CN from '../index.zh-CN.md';
 import US from '../index.en-US.md';
 
@@ -47,6 +49,7 @@ export default defineComponent({
     UseFormTrigger,
     UseFormMerge,
     LableWidth,
+    CustomizedFormControls,
   },
 });
 </script>

components/form/demo/price-input.vue

@@ -0,0 +1,52 @@
+<template>
+  <span>
+    <a-input type="text" :value="value.number" style="width: 100px" @change="onNumberChange" />
+    <a-select
+      :value="value.currency"
+      style="width: 80px; margin: 0 8px"
+      :options="[
+        { value: 'rmb', label: 'RMB' },
+        { value: 'dollar', label: 'Dollar' },
+      ]"
+      @change="onCurrencyChange"
+    ></a-select>
+  </span>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import type { PropType } from 'vue';
+import { Form } from 'ant-design-vue';
+
+export type Currency = 'rmb' | 'dollar';
+
+interface PriceValue {
+  number: number;
+  currency: Currency;
+}
+export default defineComponent({
+  props: {
+    value: { type: Object as PropType<PriceValue>, isRequired: true },
+  },
+  emits: ['update:value'],
+  setup(props, { emit }) {
+    const formItemContext = Form.useInjectFormItemContext();
+    const triggerChange = (changedValue: { number?: number; currency?: Currency }) => {
+      emit('update:value', { ...props.value, ...changedValue });
+      formItemContext.onFieldChange();
+    };
+    const onNumberChange = (e: InputEvent) => {
+      const newNumber = parseInt((e.target as any).value || '0', 10);
+      triggerChange({ number: newNumber });
+    };
+    const onCurrencyChange = (newCurrency: Currency) => {
+      triggerChange({ currency: newCurrency });
+    };
+
+    return {
+      onNumberChange,
+      onCurrencyChange,
+    };
+  },
+});
+</script>