ModalForm / DrawerForm

form-dialog

弹窗/抽屉表单 · 列表页新增/编辑编排件(复用 Dialog/Drawer + useForm + Button footer) · 提交前自动 validate · async onFinish 成功关闭/失败保持 · 文案接 i18n

用法

弹窗表单

trigger 触发打开，提交成功（onFinish resolve）自动关闭。

tsx

<ModalForm
  title="新增员工"
  trigger={<Button>新增</Button>}
  onFinish={async (values) => {
    await api.create(values);
  }}
>
  <Field label="姓名">
    <Input placeholder="必填" />
  </Field>
</ModalForm>

抽屉表单

DrawerForm 复用同一编排，从右侧贴边滑出，适合字段较多的编辑场景。

tsx

<DrawerForm
  title="编辑员工"
  trigger={<Button variant="outline">编辑</Button>}
  onFinish={(values) => api.update(values)}
>
  <Field label="姓名">
    <Input />
  </Field>
  <Field label="邮箱">
    <Input />
  </Field>
</DrawerForm>

抽屉贴边方向

DrawerForm 通过 side 控制贴边方向（left / right）。

tsx

<DrawerForm title="筛选" side="left" trigger={<Button variant="outline">左侧抽屉</Button>}>
  <Field label="关键词">
    <Input />
  </Field>
</DrawerForm>

自定义按钮文案

submitText / cancelText 覆盖默认的提交 / 取消文案。

tsx

<ModalForm
  title="导出报表"
  submitText="立即导出"
  cancelText="再想想"
  trigger={<Button>导出</Button>}
>
  <Field label="文件名">
    <Input placeholder="report.xlsx" />
  </Field>
</ModalForm>

何时用

列表页点「新增/编辑」弹出表单时用：ModalForm 居中弹窗、DrawerForm 贴边抽屉，二者 API 一致（抽屉多一个 side）。它把 Dialog/Drawer + 提交按钮 footer + 校验编排好了。页面内常驻表单用 ProForm；裸表单容器用 Form；多步向导用 StepsForm。

导入

import { ModalForm, DrawerForm } from "@hulianui/ui"

Props

公共（ModalForm = FormDialogBaseProps；DrawerForm 在此基础上加 side）：

名称	类型	默认	说明
title *	`string`	—	标题（a11y label）
open	`boolean`	—	受控开关
defaultOpen	`boolean`	—	非受控初始开关
form	`FormInstance`	—	useForm 实例：提供则提交前自动 `validate()`，校验不过保持打开
submitText	`string`	`locale.modalForm.submit`	提交按钮文案
cancelText	`string`	`locale.modalForm.cancel`	取消按钮文案
className	`string`	—	容器类名（控宽度等）
side	`DrawerSide`	`"right"`	仅 `DrawerForm`：抽屉贴边方向

Events

事件	类型	说明
onOpenChange	`(open: boolean) => void`	开关变化回调
onFinish	`(values: FormValues) => void \| boolean \| Promise<void \| boolean>`	提交回调；返回 Promise → 按钮 loading；resolve(非 false) 自动关闭；reject 或返回 false 保持打开

Slots

插槽	类型	说明
trigger	`ReactElement`	触发元素（非受控打开用）；受控时可省
children	`ReactNode`	表单字段

禁忌 / 坑

关/不关由 onFinish 返回值决定：resolve 非 false → 自动关；想留在原地（如自处理错误）reject 或 return false。别在 onFinish 里手动调 onOpenChange(false) 跟自动关闭打架。
传了 form 才会提交前自动 validate() 并在校验不过时保持打开；不传 form 则不校验、直接把 values 交给 onFinish。
提交成功后想清空字段需自己调 form.resetFields()，组件不会替你重置。

相关

Form · ProForm · StepsForm · LoginForm · Field · SearchForm

用法

弹窗表单

trigger 触发打开，提交成功（onFinish resolve）自动关闭。

tsx

<ModalForm
  title="新增员工"
  trigger={<Button>新增</Button>}
  onFinish={async (values) => {
    await api.create(values);
  }}
>
  <Field label="姓名">
    <Input placeholder="必填" />
  </Field>
</ModalForm>

抽屉表单

DrawerForm 复用同一编排，从右侧贴边滑出，适合字段较多的编辑场景。

tsx

<DrawerForm
  title="编辑员工"
  trigger={<Button variant="outline">编辑</Button>}
  onFinish={(values) => api.update(values)}
>
  <Field label="姓名">
    <Input />
  </Field>
  <Field label="邮箱">
    <Input />
  </Field>
</DrawerForm>

抽屉贴边方向

DrawerForm 通过 side 控制贴边方向（left / right）。

tsx

<DrawerForm title="筛选" side="left" trigger={<Button variant="outline">左侧抽屉</Button>}>
  <Field label="关键词">
    <Input />
  </Field>
</DrawerForm>

自定义按钮文案

submitText / cancelText 覆盖默认的提交 / 取消文案。

tsx

<ModalForm
  title="导出报表"
  submitText="立即导出"
  cancelText="再想想"
  trigger={<Button>导出</Button>}
>
  <Field label="文件名">
    <Input placeholder="report.xlsx" />
  </Field>
</ModalForm>

何时用

Props

公共（ModalForm = FormDialogBaseProps；DrawerForm 在此基础上加 side）：

名称	类型	默认	说明
title *	`string`	—	标题（a11y label）
open	`boolean`	—	受控开关
defaultOpen	`boolean`	—	非受控初始开关
form	`FormInstance`	—	useForm 实例：提供则提交前自动 `validate()`，校验不过保持打开
submitText	`string`	`locale.modalForm.submit`	提交按钮文案
cancelText	`string`	`locale.modalForm.cancel`	取消按钮文案
className	`string`	—	容器类名（控宽度等）
side	`DrawerSide`	`"right"`	仅 `DrawerForm`：抽屉贴边方向

事件

类型

说明

onOpenChange

(open: boolean) => void

开关变化回调

onFinish

(values: FormValues) => void | boolean | Promise<void | boolean>

提交回调；返回 Promise → 按钮 loading；resolve(非 false) 自动关闭；reject 或返回 false 保持打开

插槽

类型

说明

trigger

ReactElement

触发元素（非受控打开用）；受控时可省

children

ReactNode

表单字段

禁忌 / 坑

关/不关由 onFinish 返回值决定：resolve 非 false → 自动关；想留在原地（如自处理错误）reject 或 return false。别在 onFinish 里手动调 onOpenChange(false) 跟自动关闭打架。

传了 form 才会提交前自动 validate() 并在校验不过时保持打开；不传 form 则不校验、直接把 values 交给 onFinish。

提交成功后想清空字段需自己调 form.resetFields()，组件不会替你重置。