amis2/docs/renderers/Form.md

23 KiB
Raw Blame History

Form

表单渲染器,主要用来展示或者接收用户输入后将数据提交给后端或者其他组件。

{
  "type": "page",
  "body": {
    "type": "form",
    "name": "sample1",
    "api": "/api/mock2/form/saveForm?waitSeconds=1",
    "controls": [
      {
        "name": "email",
        "label": "Email",
        "type": "email",
        "description": "描述文字"
      },
      {
        "name": "text",
        "type": "text",
        "label": "Text"
      }
    ]
  }
}
属性名 类型 默认值 说明
type string "form" 指定为 Form 渲染器
mode string normal 表单展示方式,可以是:normalhorizontal 或者 inline
horizontal Object {"left":"col-sm-2", "right":"col-sm-10", "offset":"col-sm-offset-2"} 当 mode 为 horizontal 时有用,用来控制 label
title string "表单" Form 的标题
submitText String "提交" 默认的提交按钮名称,如果设置成空,则可以把默认按钮去掉。
className string 外层 Dom 的类名
controls Array of FormItem Form 表单项集合
actions Array of Action Form 提交按钮,成员为 Action
messages Object 消息提示覆写,默认消息读取的是 API 返回的消息,但是在此可以覆写它。
messages.fetchSuccess string 获取成功时提示
messages.fetchFailed string 获取失败时提示
messages.saveFailed string 保存成功时提示
messages.saveSuccess string 保存失败时提示
wrapWithPanel boolean true 是否让 Form 用 panel 包起来,设置为 false 后actions 将无效。
panelClassName boolean true 是否让 Form 用 panel 包起来,设置为 false 后actions 将无效。
api Api Form 用来保存数据的 api。
initApi Api Form 用来获取初始数据的 api。
interval number 3000 刷新时间(最低 3000)
silentPolling boolean false 配置刷新时是否显示加载动画
stopAutoRefreshWhen string "" 通过表达式 来配置停止刷新的条件
initAsyncApi Api Form 用来获取初始数据的 api,与 initApi 不同的是,会一直轮训请求该接口,直到返回 finished 属性为 true 才 结束。
initFetch boolean true 设置了 initApi 或者 initAsyncApi 后,默认会开始就发请求,设置为 false 后就不会起始就请求接口
initFetchOn string 用表达式来配置
initFinishedField string finished 设置了 initAsyncApi 后,默认会从返回数据的 data.finished 来判断是否完成,也可以设置成其他的 xxx就会从 data.xxx 中获取
initCheckInterval number 3000 设置了 initAsyncApi 以后,默认拉取的时间间隔
schemaApi Api 已不支持,请改用 controls 里面放置 Service 渲染器实现
asyncApi Api 设置此属性后,表单提交发送保存接口后,还会继续轮训请求该接口,直到返回 finished 属性为 true 才 结束。
checkInterval number 3000 轮训请求的时间间隔,默认为 3 秒。设置 asyncApi 才有效
finishedField string "finished" 如果决定结束的字段名不是 finished 请设置此属性,比如 is_success
submitOnChange boolean false 表单修改即提交
submitOnInit boolean false 初始就提交一次
resetAfterSubmit boolean false 提交后是否重置表单
primaryField string "id" 设置主键 id, 当设置后检测表单是否完成时asyncApi只会携带此数据。
target string 默认表单提交自己会通过发送 api 保存数据,但是也可以设定另外一个 form 的 name 值,或者另外一个 CRUD 模型的 name 值。 如果 target 目标是一个 Form ,则目标 Form 会重新触发 initApiapi 可以拿到当前 form 数据。如果目标是一个 CRUD 模型,则目标模型会重新触发搜索,参数为当前 Form 数据。当目标是 window 时,会把当前表单的数据附带到页面地址上。
redirect string 设置此属性后Form 保存成功后,自动跳转到指定页面。支持相对地址,和绝对地址(相对于组内的)。
reload string 操作完后刷新目标对象。请填写目标组件设置的 name 值,如果填写为 window 则让当前页面整体刷新。
autoFocus boolean false 是否自动聚焦。
canAccessSuperData boolean true 指定是否可以自动获取上层的数据并映射到表单项上
name string 设置一个名字后,方便其他组件与其通信

表单项都是通过 controls 设置的,类型是数组,成员主要是FormItem,默认一行一个(当然 form 是 inline 模式时例外),如果想一行多个,可以将多个FormItem放在一个 Group 里面。

{
  "type": "form",
  "name": "sample2",
  "controls": [
    {
      "type": "text",
      "name": "test",
      "label": "Label",
      "placeholder": "Placeholder"
    },

    {
      "type": "divider"
    },

    {
      "type": "group",
      "controls": [
        {
          "type": "text",
          "name": "test1",
          "label": "Label",
          "placeholder": "Placeholder"
        },

        {
          "type": "text",
          "name": "test2",
          "label": "Label",
          "placeholder": "Placeholder"
        }
      ]
    }
  ]
}

水平模式的 Form 也支持 Group 展现。

{
  "type": "form",
  "mode": "horizontal",
  "name": "sample3",
  "controls": [
    {
      "type": "text",
      "name": "test",
      "label": "Label",
      "placeholder": "Placeholder"
    },

    {
      "type": "divider"
    },

    {
      "type": "group",
      "controls": [
        {
          "type": "text",
          "name": "test1",
          "label": "Label",
          "placeholder": "Placeholder"
        },

        {
          "type": "text",
          "name": "test2",
          "label": "Label",
          "placeholder": "Placeholder"
        }
      ]
    },

    {
      "type": "divider"
    },

    {
      "type": "group",
      "controls": [
        {
          "type": "text",
          "name": "test3",
          "label": "Label",
          "placeholder": "Placeholder"
        },

        {
          "inline": true,
          "type": "text",
          "name": "test4",
          "label": "Label",
          "placeholder": "Placeholder"
        }
      ]
    },

    {
      "type": "divider"
    },

    {
      "type": "group",
      "controls": [
        {
          "type": "text",
          "name": "test3",
          "label": "Label",
          "inline": true,
          "labelClassName": "col-sm-2",
          "placeholder": "Placeholder"
        },

        {
          "inline": true,
          "type": "text",
          "name": "test4",
          "label": "Label",
          "placeholder": "Placeholder"
        }
      ]
    }
  ]
}