示例

按常见场景查找配置入口。每个示例保留短代码片段，并链接到完整文档和可交互演练场。

最小表单

用一个 flat FormConfig 渲染基础字段，并把提交交给 Ant Design Form。

const formConfig = {
  fields: [
    { id: 'name', label: 'Name', component: 'TextInput', required: true }
  ]
};

文档演练场

分组表单

把字段组织到 groups 中，使用默认 Card 布局或后续 render hooks 替换外壳。

const formConfig = {
  groups: [
    { id: 'basic', title: 'Basic', fields: [{ id: 'email', component: 'TextInput' }] }
  ]
};

文档演练场

字段联动

通过 dependents 和 effect 返回 visible、disabled、value 或 render meta。

{
  id: 'companyName',
  dependents: ['hasCompany'],
  effect: (_value, allValues) => ({ visible: allValues.hasCompany === true })
}

文档演练场

自定义组件

用 componentRegistry 注册业务字段组件，仍由 DynamicForm 负责运行时 props。

<DynamicForm
  componentRegistry={{ customComponents: { ProjectSelect } }}
  formConfig={formConfig}
/>

文档演练场

自定义 handlers

把 effect 返回值映射到业务语义，保持组件只负责渲染。

const handler = {
  name: 'highlight',
  canHandle: (key) => key === 'highlight',
  handle: (context, enabled) => context.updateFieldMeta({ componentProps: { enabled } })
};

文档演练场

Compiler / Adapter

把 JsonSchema、OpenAPI 或 metadata 适配为模块配置，再编译为标准 FormConfig。

const compiled = compileAdaptedFormConfig(schema, {
  adapterType: 'json-schema',
  moduleRegistry
});

文档演练场