amis/docs/zh-CN/components/form/formitem.md
2021-01-19 10:20:09 +08:00

18 KiB
Executable File
Raw Blame History

title description type group menuName icon order
FormItem 普通表单项 0 null Formula 普通表单项 1

表单项 是组成一个表单的基本单位,它具有的一些特性会帮助我们更好地实现表单操作。

所有派生自FormItem的组件,都具有FormItem的特性。

基本用法

最基本的表单项配置像这样:

{
  "type": "form",
  "controls": [
    {
      "type": "text",
      "label": "文本框",
      "name": "text"
    }
  ]
}
  • name: 必填属性,标识表单数据域中,当前表单项值的key,这个 name 可以是深层结构,比如 aa.bb
  • type: 必填属性,标识表单项类型
  • label: 标识表单项的标签

所有表单项都只可以配置在form组件中,即formcontrols属性中。

表单项展示

内联模式

通过配置"mode": "inline",标识当前表单项使用内联模式。

{
  "type": "form",
  "controls": [
    {
      "type": "text",
      "label": "常规",
      "name": "text1"
    },
    {
      "type": "text",
      "label": "内联",
      "name": "text2",
      "mode": "inline"
    }
  ]
}

表单项尺寸

可以配置size,来调整表单项的尺寸,支持'xs' | 'sm' | 'md' | 'lg' | 'full',如下:

{
  "type": "form",
  "controls": [
    {
      "type": "text",
      "label": "极小",
      "name": "text-xs",
      "size": "xs"
    },
    {
      "type": "text",
      "label": "小",
      "name": "text-sm",
      "size": "sm"
    },
    {
      "type": "text",
      "label": "中",
      "name": "text-md",
      "size": "md"
    },
    {
      "type": "text",
      "label": "大",
      "name": "text-lg",
      "size": "lg"
    },
    {
      "type": "text",
      "label": "占满",
      "name": "text-lg",
      "size": "full"
    }
  ]
}

不同组件的size效果可能会有所不同,具体请参考对应的组件文档。

表单项标签

设置label属性来配置表单项标签。

当表单为水平布局时,左边即便是不设置label为了保持对齐也会留空,如果想要去掉空白,请设置成false

{
  "type": "form",
  "mode": "horizontal",
  "controls": [
    {
      "type": "text",
      "label": "常规",
      "name": "text1",
      "placeholder": "常规标签"
    },
    {
      "type": "text",
      "label": "",
      "name": "text1",
      "placeholder": "不显示标签"
    },
    {
      "type": "text",
      "label": false,
      "name": "text1",
      "placeholder": "不显示标签且清除空间"
    }
  ]
}

表单项标签提示

配置labelRemark可以实现标签描述提示

{
  "type": "form",
  "mode": "horizontal",
  "controls": [
    {
      "type": "text",
      "label": "无标签提示",
      "name": "text1"
    },
    {
      "type": "text",
      "label": "有标签提示",
      "labelRemark": "这是一段提示",
      "name": "text2"
    },
    {
      "type": "text",
      "label": "更复杂的标签提示",
      "labelRemark": {
        "type": "remark", "title": "提示", "content": "<pre>first \nsecond\n${text1}</pre>"
      },
      "name": "text3"
    }
  ]
}

配置禁用

静态配置

通过配置"disabled": true来禁用表单项

{
  "type": "form",
  "controls": [
    {
      "type": "text",
      "label": "常规",
      "name": "text1"
    },
    {
      "type": "text",
      "label": "禁用",
      "name": "text2",
      "disabled": true
    }
  ]
}
通过条件配置是否禁用

你也通过表达式配置disabledOn,来实现在某个条件下禁用当前表单项.

{
  "type": "form",
  "controls": [
    {
      "type": "number",
      "label": "数量",
      "name": "number",
      "value": 0,
      "description": "调整数量大小查看效果吧!"
    },
    {
      "type": "text",
      "label": "文本",
      "name": "text",
      "disabledOn": "this.number > 1",
      "description": "当数量大于1的时候该文本框会被禁用"
    }
  ]
}

配置显隐

静态配置

通过配置"hidden": true或者"visible": false来禁用表单项

{
  "type": "form",
  "controls": [
    {
      "type": "text",
      "label": "常规",
      "name": "text1"
    },
    {
      "type": "text",
      "label": "隐藏",
      "name": "text2",
      "hidden": true
    }
  ]
}

上例中的text2被隐藏了。

通过条件配置显隐

你也通过表达式配置hiddenOn,来实现在某个条件下禁用当前表单项.

{
  "type": "form",
  "controls": [
    {
      "type": "number",
      "label": "数量",
      "name": "number",
      "value": 0,
      "description": "调整数量大小查看效果吧!"
    },
    {
      "type": "text",
      "label": "文本",
      "name": "text",
      "hiddenOn": "this.number > 1",
      "description": "当数量大于1的时候该文本框会隐藏"
    }
  ]
}

visiblehiddenvisibleOnhiddenOn除了判断逻辑相反以外,没有任何区别

表单项值

表单项值,即表单项通过用户交互发生变化后,更新表单数据域中同name变量值.

{
  "type": "form",
  "debug": true,
  "controls": [
    {
      "type": "text",
      "label": "姓名",
      "name": "name"
    }
  ]
}

如上例,更改姓名表单项值,可以改变表单数据域中name变量的值。

也支持链式配置 name属性,例如:aaa.bbb

{
  "type": "form",
  "debug": true,
  "controls": [
    {
      "type": "text",
      "label": "姓名",
      "name": "person.name"
    }
  ]
}

观察上例,这样更改表单项值,会改变数据域中person.name的值

{
  "person": {
    "name": "xxx"
  }
}

配置默认值

通过配置value属性,可以设置表单项的默认值。

{
  "type": "form",
  "controls": [
    {
      "type": "text",
      "label": "text",
      "name": "text",
      "value": "hello world!",
      "description": "拥有默认值的 text"
    }
  ]
}

value不支持数据映射,也就是说不可以直接配置类似于这样的语法:${xxx},如果想要映射当前数据域中的某个变量,那么设置该表单项name为该变量名就行,如下:

{
  "type": "form",
  "data":{
    "text": "hello world!"
  },
  "controls": [
    {
      "type": "text",
      "label": "text",
      "name": "text",
      "description": "拥有默认值的 text"
    }
  ]
}

上例中我们表单数据域中有变量"text": "hello world!",然后我们设置表达项"name": "text",这样就可以自动映射值了。

表单项必填

静态配置

通过配置"required": true来标识该表单项为必填。

{
  "type": "form",
  "api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
  "controls": [
    {
      "type": "text",
      "label": "常规",
      "name": "text",
      "required": true
    }
  ]
}

满足条件校验必填

你也通过表达式配置requiredOn,来实现在某个条件下使当前表单项必填。

{
  "type": "form",
  "api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
  "controls": [
    {
      "type": "number",
      "label": "数量",
      "name": "number",
      "value": 0,
      "description": "调整数量大小查看效果吧!"
    },
    {
      "type": "text",
      "label": "文本",
      "name": "text",
      "requiredOn": "this.number > 1",
      "description": "当数量大于1的时候该文本框为必填"
    }
  ]
}

格式校验

可以配置validations属性,指定校验当前表单项值的格式

可以通过对象形式配置

{
  "type": "form",
  "api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
  "controls": [
    {
      "type": "text",
      "label": "文本",
      "name": "text",
      "validations": {
        "isNumeric": true
      },
      "description": "请输入数字类型文本"
    }
  ]
}

同样也可以配置多个格式校验

{
  "type": "form",
  "api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
  "controls": [
    {
      "type": "text",
      "label": "文本",
      "name": "text",
      "validations": {
        "isNumeric": true,
        "minimum": 10
      },
      "description": "请输入数字类型文本"
    }
  ]
}

字符串形式(不推荐)

也可以配置字符串形式来指定,如下例,输入不合法的值,点击提交会报错并显示报错信息

{
  "type": "form",
  "api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
  "controls": [
    {
      "type": "text",
      "label": "文本",
      "name": "text",
      "validations": "isNumeric",
      "description": "请输入数字类型文本"
    }
  ]
}

也可以指定多个格式校验,中间用逗号分隔。

{
  "type": "form",
  "api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
  "controls": [
    {
      "type": "text",
      "label": "文本",
      "name": "text",
      "validations": "isNumeric,minimum:10",
      "description": "请输入数字类型文本"
    }
  ]
}

如果需要配置参数,例如显示最大值或最小值,则在格式标识符后:和参数

自定义校验信息

amis 会有默认的报错信息,如果你想自定义校验信息,配置validationErrors属性

{
  "type": "form",
  "api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
  "controls": [
    {
      "type": "text",
      "label": "文本",
      "name": "text",
      "validations": {
        "isNumeric": true
      },
      "validationErrors": {
        "isNumeric": "同学,请输入数字哈"
      },
      "description": "请输入数字类型文本"
    }
  ]
}

如果需要获取当前格式校验配置的参数,可以使用$1

{
  "type": "form",
  "api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
  "controls": [
    {
      "type": "text",
      "label": "文本",
      "name": "text",
      "validations": {
        "isNumeric": true,
        "minimum": 10
      },
      "validationErrors": {
        "minimum": "同学,最少输入$1以上的数字哈"
      },
      "description": "请输入数字类型文本"
    }
  ]
}

表单项值发生变化即校验

默认校验是当进行行为操作时,对表单项进行校验,如果你想每次表单项的值发生变化的时候就校验,请配置"validateOnChange": false

支持的格式校验

  • isEmptyString 必须是空白字符。注意! 该格式校验是值,校验空白字符,而不是当前表单项是否为空,想校验是否为空,请配置 必填校验
  • isEmail 必须是 Email。
  • isUrl 必须是 Url。
  • isNumeric 必须是 数值。
  • isAlpha 必须是 字母。
  • isAlphanumeric 必须是 字母或者数字。
  • isInt 必须是 整形。
  • isFloat 必须是 浮点形。
  • isLength:length 是否长度正好等于设定值。
  • minLength:length 最小长度。
  • maxLength:length 最大长度。
  • maximum:number 最大值。
  • minimum:number 最小值。
  • equals:xxx 当前值必须完全等于 xxx。
  • equalsField:xxx 当前值必须与 xxx 变量值一致。
  • isJson 是否是合法的 Json 字符串。
  • notEmptyString 要求输入内容不是空白。
  • isUrlPath 是 url 路径。
  • matchRegexp:/foo/ 必须命中某个正则。
  • matchRegexp1:/foo/ 必须命中某个正则。
  • matchRegexp2:/foo/ 必须命中某个正则。
  • matchRegexp3:/foo/ 必须命中某个正则。
  • matchRegexp4:/foo/ 必须命中某个正则。

自定义校验函数

可以自己写代码扩展表单验证,请参考 这里

服务端校验

也可以通过接口返回错误信息,实现服务端校验

{
  "type": "form",
  "api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveFormFailed?waitSeconds=1",
  "controls": [
    {
        "name": "test2",
        "type": "text",
        "label": "服务端验证"
    }
  ]
}

点击提交api 接口返回中,需要在 errors 变量中,返回某个表单项的报错信息,key值为该表单项的name值。

如上,接口返回的格式如下,提交后,test2表达项会显示报错信息

{
  "status": 422, // 返回非0状态码
  "msg": "",
  "errors": {
    "test2": "服务器端说,这个有错误。"
  },
  "data": null
}

Combo 校验

Combo 类型的表单项,要实现服务端校验,可以使用 路径key 来定位要显示报错信息的表单项,例如 a[0].b 定位到 a combo 的第一项中 b 表单项。

例如有如下表单,点击提交,查看效果:

{
  "type": "form",
  "debug": true,
  "mode": "horizontal",
  "api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveFormFailedCombo?waitSeconds=1",
  "controls": [
    {
      "type": "combo",
      "name": "combo1",
      "label": "组合多条单行",
      "multiple": true,
      "value": [
        {
          "a": "a1",
          "b": "a"
        },
        {
          "a": "a2",
          "b": "c"
        }
      ],
      "controls": [
        {
          "name": "a",
          "type": "text"
        },
        {
          "name": "b",
          "type": "select",
          "options": ["a", "b", "c"]
        }
      ]
    },
    {
      "type": "combo",
      "name": "combo2",
      "label": "组合单条单行",
      "value": {
        "a": "a",
        "b": "b"
      },
      "controls": [
        {
          "name": "a",
          "type": "text"
        },
        {
          "name": "b",
          "type": "select",
          "options": ["a", "b", "c"]
        }
      ]
    }
  ]
}

接口返回如下

{
  "status": 422,
  "msg": "",
  "errors": {
    "combo1": "服务器端说这个combo1有问题",
    "combo1[1].a": "服务器端说这个combo1的第二项中的a有问题", // 或 combo1.1.a
    "combo2": "服务器端说这个combo2有问题",
    "combo2.b": "服务器端说这个combo2中的b有问题"
  },
  "data": null
}

属性表

属性名 类型 默认值 说明
type string 指定表单项类型
className string 表单最外层类名
inputClassName string 表单控制器类名
labelClassName string label 的类名
name string 字段名,指定该表单项提交时的 key
label 模板false 表单项标签
labelRemark Remark 表单项标签描述
description 模板 表单项描述
placeholder string 表单项描述
inline boolean 是否为 内联 模式
submitOnChange boolean 是否该表单项值发生变化时就提交当前表单。
disabled boolean 当前表单项是否是禁用状态
disabledOn 表达式 当前表单项是否禁用的条件
visible 表达式 当前表单项是否禁用的条件
visibleOn 表达式 当前表单项是否禁用的条件
required boolean 是否为必填。
requiredOn 表达式 表达式来配置当前表单项是否为必填。
validations 表达式 表单项值格式验证,支持设置多个,多个规则用英文逗号隔开。