@g3-cscec/meta-form-core v0.13.0

基础表单

概述

• 基于 @formily/core、@formily/reactive-react 结合 ant Form 组件封装的 G3Form
• @formily/core 提供表单值搜集、管理的能力
• @formily/reactive-react 提供响应式监听字段变化，以及联动重新渲染表单字段的能力
• ant Form、FormItem 提供表单布局、同时支持 Row、Col 嵌套布局

G3Form

基本使用

const formRef = useRef()

<G3Form ref={formRef}>
  <G3FormField
    component={[
      G3Components.G3Radio,
      {
        text: 'closed',
        valueEnum: [
          {
            label: '未解决',
            value: 'open'
          },
          {
            label: '已解决',
            value: 'closed'
          },
          {
            label: '解决中',
            value: 'processing'
          }
        ]
      }
    ]}
    name="approveStatus"
    title="审核状态类型"
    formItemProps={{
      labelCol: { span: 8 },
      wrapperCol: { span: 12 }
    }}
  />
</G3Form>

属性

• 支持 ant Form 表单的常用属性 如： initialValues，labelAlign，labelCol，layout，name，size，wrapperCol，onFinish，onFinishFailed，onValuesChange

• 新增属性

<G3Form
  debug // 开发调试状态，为true时，会自动加载表单值展示
  ref={formRef} // G3Form 暴漏api的调用方式
  gridColumns={8} // gridColumns 表单布局，支持 1~24 配置，字段占用栅格，一行被分为 24 个栅格
/>

• 支持 antd 嵌套 row col 布局

G3FormField