amis2/docs-old/renderers/Form/FormItem.md
2020-07-28 10:03:53 +08:00

3.5 KiB

FormItem

Form 中主要是由各种 FormItem 组成。FormItem 中主要包含这些字段。

  • name 字段名,表单提交时的 key。

  • value 值,可以通过它设置默认值。

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

  • description 描述内容。

  • placeholder 占位内容。

  • type 指定表单类型,如: texttextareadateemail等等

  • inline 是否为 inline 模式。

  • submitOnChange 是否该表单项值发生变化时就提交当前表单。

  • className 表单最外层类名。

  • disabled 当前表单项是否是禁用状态。

  • disabledOn 通过表达式来配置当前表单项的禁用状态。

  • visible 是否可见。

  • visibleOn 通过表达式来配置当前表单项是否显示。

  • hidden 是否隐藏,不要跟 visible visibleOn 同时配置

  • hiddenOn 通过表达式来配置当前表单项是否隐藏。

  • inputClassName 表单控制器类名。

  • labelClassName label 的类名。

  • required 是否为必填。

  • requiredOn 通过表达式来配置当前表单项是否为必填。

  • validations 格式验证,支持设置多个,多个规则用英文逗号隔开。

    • 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/ 必须命中某个正则。 如:
    {
      "validations": "isNumeric,minimum:10",
    
      // 或者对象配置方式, 推荐
      "validations": {
        "isNumeric": true,
        "minimum": 10
      }
    }
    
  • validationErrors 自定义错误提示, 配置为对象, key 为规则名, value 为错误提示字符串(提示:其中$1表示输入) 如:

    {
      "validationErrors": {
        "isEmail": "请输入正确的邮箱地址"
      }
    }
    
  • validateOnChange 是否修改就验证数值,默认当表单提交过就会每次修改验证,如果要关闭请设置为 false,即便是关了,表单提交前还是会验证的。

{
  "type": "text",
  "name": "test1",
  "label": "Label",
  "description": "Description...",
  "placeholder": "Placeholder",
  "validateOnChange": true,
  "validations": "matchRegexp: /^a/, minLength:3,maxLength:5",
  "validationErrors": {
    "matchRegexp": "必须为a开头",
    "minLength": "小伙伴,最低为$1个字符!"
  }
}

不同类型的表单,可配置项还有更多,具体请看下面对应的类型。