# Create-Form 创建表单

# install

tnpm i -S @sula-template/create-form

# usage

import CreateForm from "@sula-template/create-form";

# API

# ref

获取 form 实例

# container

• 类型:ReactElement | (ctx) => ReactElement |RenderType
• 默认值:'card'

表单容器，容器组件会包裹表单, 同form container

# layout

• 类型: 'horizontal' | 'vertical' | 'inline'
• 默认值: 'horizontal'

# itemLayout

• 类型：object
• 默认值：{ span: 24, labelCol: { span: 6 }, wrapperCol: { span: 12 } }

表单项布局分布，同itemLayout

# mode

• 类型：'create' | 'view' | 'edit'
• 默认值： 'create'

表单模式，create👉 创建模式，view👉 查看模式，edit👉 编辑模式

# initialValues

• 类型： object
• 默认值： -

表单初始值

# remoteValues

• 类型：FetchType
• 默认值：-

表单初始值远程请求配置

示例：

{
  url: '表单初始值数据请求地址',
  method: '请求方法',
  params: {
    // 请求参数
  },
  converter: (ctx, config) => {
    //请求返回数据转化 可通过ctx.data获取接口返回数据
  },
}

# fields

• 类型：Array<Field>
• 默认值：-

表单控件配置

示例：

[
  {
    name: "表单控件name属性",
    label: "label标签",
    render: RenderType
  }
];

# footerActions

• 类型：Array
• 默认值：-

底部按钮配置，完整参数配置同footerRender

示例：

[
  {
    type: "button",
    text: "Create",
    path: "/task/new",
    query: { id: "s500" },
    props: {
      icon: "plus",
      type: "success",
      shape: "round"
    }
  }
];

# actionsPosition

• 类型：bottom | inner | innerRight
• 默认值：bottom

按钮组位置

# formProps

• 类型：FormProps
• 默认值： -

表单其他配置，详细配置请查看sula-form

# submit

• 类型：FetchType
• 默认值：-

向后端提交表单信息

示例：

{
  url: "https://jsonplaceholder.typicode.com/posts/1",
  type: "get",
  params: {
   id: '0323',
  },
  final() {},
  finish({ result }) {}, // 完成后要串联的下个动作
};

配置参数：