baidu / amis

前端低代码框架,通过 JSON 配置就能生成各种页面。
https://baidu.github.io/amis/
Apache License 2.0
17.18k stars 2.49k forks source link

Control 组件可以支持显示表单校验错误信息 #10492

Closed tianxiang24 closed 2 months ago

tianxiang24 commented 3 months ago

是否关联于某个问题吗:

请用一段简单清晰的文字描述你的想法是关联于某个问题,例如:因为我没办法实现xxx...

Control 组件现在支持显示 description、required 星号,但不支持显示表单校验错误信息

预期的解决方案:

请简单描述你想达到的效果...

image Control 组件下支持显示表单校验的错误信息

其他可接受方案:

请简单描述其他你可以接受的效果...

任何附加信息:

请添加任何可以补充说明上述问题的材料,例如图片或视频等...

allenve commented 3 months ago

参考一下这里:https://aisuda.bce.baidu.com/amis/zh-CN/components/form/formitem#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%A0%A1%E9%AA%8C%E4%BF%A1%E6%81%AF

tianxiang24 commented 3 months ago

这样是不会有校验信息的

{
  "type": "page",
  "body": {
    "type": "form",
    "api": "/amis/api/mock2/form/saveForm",
    "body": [
      {
        "type": "input-text",
        "label": "文本",
        "name": "text",
        "validations": {
          "isNumeric": true
        },
        "validationErrors": {
          "isNumeric": "同学,请输入数字哈"
        },
        "description": "请输入数字类型文本"
      },
      {
        "type": "control",
        "body": {
          "type": "button",
          "label": "按钮"
        },
        "name": "text",
        "validations": {
          "isNumeric": true
        },
        "validationErrors": {
          "isNumeric": "同学,请输入数字哈"
        }
      },
      {
        "type": "button",
        "label": "提交",
        "actionType": "submit"
      }
    ]
  }
}

image

allenve commented 3 months ago

没看懂你的用法 control 是展示类组件 用于包裹表单项的 你可以在里面放个有自定义校验内容的表单项 比如

{
  "type": "page",
  "body": {
    "type": "form",
    "api": "/amis/api/mock2/form/saveForm",
    "body": [
      {
        "type": "control",
        "body": [
          {
            "type": "input-text",
            "label": "文本1",
            "name": "text1",
            "validations": {
              "isNumeric": true
            },
            "validationErrors": {
              "isNumeric": "同学,请输入数字哈"
            },
            "description": "请输入数字类型文本"
          }
        ]
      },
      {
        "type": "button",
        "label": "提交",
        "actionType": "submit"
      }
    ]
  }
}

你的示例里面放了个按钮,并且想校验内容,不太理解你的问题是什么