From 86ac4c6afb57594ee99766cb694a762b64714fda Mon Sep 17 00:00:00 2001
From: Mio <miownag@gmail.com>
Date: Mon, 23 Sep 2024 17:44:21 +0800
Subject: [PATCH] docs(form): add customized form controls example

---
 .../_example/customized-form-controls.tsx     | 87 +++++++++++++++++++
 src/form/form.md                              | 10 ++-
 2 files changed, 95 insertions(+), 2 deletions(-)
 create mode 100644 src/form/_example/customized-form-controls.tsx

diff --git a/src/form/_example/customized-form-controls.tsx b/src/form/_example/customized-form-controls.tsx
new file mode 100644
index 0000000000..43a5340001
--- /dev/null
+++ b/src/form/_example/customized-form-controls.tsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import { Form, Input, Button, MessagePlugin, Space, Select } from 'tdesign-react';
+import type { FormProps } from 'tdesign-react';
+
+interface ICourseSelect {
+  value?: {
+    type?: string;
+    name?: string;
+  };
+  onChange?: (v: { type?: string; name?: string }) => void;
+}
+
+const { FormItem } = Form;
+
+function CourseSelect(props: ICourseSelect) {
+  const { value, onChange } = props;
+
+  return (
+    <Space>
+      <Select
+        options={[
+          {
+            label: '数学',
+            value: 'math',
+          },
+          {
+            label: '英语',
+            value: 'english',
+          },
+        ]}
+        value={value?.type}
+        onChange={(v) => {
+          onChange?.({
+            ...value,
+            type: v as string,
+          });
+        }}
+        placeholder="请选择课程类型"
+      />
+      <Input
+        value={value?.name}
+        onChange={(v) => {
+          onChange?.({
+            ...value,
+            name: v,
+          });
+        }}
+        placeholder="请输入课程名称"
+      />
+    </Space>
+  );
+}
+
+export default function BaseForm() {
+  const [form] = Form.useForm();
+
+  const onSubmit: FormProps['onSubmit'] = (e) => {
+    console.log(e);
+    if (e.validateResult === true) {
+      MessagePlugin.info('提交成功');
+    }
+  };
+  const setData = () => {
+    form.setFieldsValue?.({
+      course: {
+        type: 'math',
+        name: '线性代数',
+      },
+    });
+  };
+
+  return (
+    <Form form={form} onSubmit={onSubmit} colon labelWidth={100}>
+      <FormItem label="课程" name="course">
+        <CourseSelect />
+      </FormItem>
+      <FormItem style={{ marginLeft: 100 }}>
+        <Button type="submit" theme="primary">
+          提交
+        </Button>
+        <Button theme="primary" onClick={setData} style={{ marginLeft: 12 }}>
+          设置信息
+        </Button>
+      </FormItem>
+    </Form>
+  );
+}
diff --git a/src/form/form.md b/src/form/form.md
index 245d49d880..09fc055486 100644
--- a/src/form/form.md
+++ b/src/form/form.md
@@ -2,16 +2,22 @@
 
 ### 复杂嵌套数据结构表单
 
-可给 `name` 传入数组整理成对象嵌套数据结构
+可给 `name` 传入数组整理成对象嵌套数据结构。
 
 {{ nested-data }}
 
 ### 动态增减嵌套表单
 
-可使用 `Form.FormList` 组件创建动态表单
+可使用 `Form.FormList` 组件创建动态表单。
 
 {{ form-list }}
 
+### 自定义表单控件
+
+可以使用 `Form.FormItem` 包裹自定义组件并在组件中接受 `value` 和 `onChange` 的入参，实现自定义表单控件。
+
+{{ customized-form-controls }}
+
 ## Hooks
 
 ### Form.useForm