ant-design Form.Item validateFirst属性希望对 多个输入框组合(Input.Group) 也生效

von4xj4u  于 2022-10-25  发布在  其他
关注(0)|答案(6)|浏览(383)
  • I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

一个Form.Item中有多个noStyle的Form.Item时,希望只显示第一个错误

What does the proposed API look like?

Form.Item validateFirst属性希望对Input.Group也生效
一个Form.Item中有多个noStyle的Form.Item时,希望只显示第一个错误
https://codesandbox.io/s/fuzayidiandekongjian-antd4123-forked-07t65?file=/index.js
现在在最外层Form.Item设置validateFirst, 依然会出现多个错误

jslywgbw

jslywgbw1#

@crazyair 平时这种场景你是怎么处理的?

0md85ypi

0md85ypi2#

@crazyair 平时这种场景你是怎么处理的?

在多个字段必须填一项的情况下,全部设置同样的 rules

const check3: RuleRender = ({ getFieldsValue }) => ({
    validator: () => {
      const { telephone, email, we_chat } = getFieldsValue();
      if (telephone || email || we_chat) {
        return Promise.resolve();
      }
      return Promise.reject('手机、邮箱或者微信至少填写一个');
    },
  });
91zkwejq

91zkwejq3#

@crazyair 我这边碰到的问题是Form.Item包裹多个noStyle的Form.Item时,我想校验的时候下方只出现第一个错误..
现在是下方会出现下级所有Form.Item的报错信息,validateFirst属性控制不了..

https://codesandbox.io/s/fuzayidiandekongjian-antd4123-forked-07t65?file=/index.js
这个链接里下面那个就是我想要的效果,但是我是用未公开的api实现的 https://github.com/ant-design/ant-design/issues/29350,咨询了下不推荐使用
所以我想框架内部方不方便提供属性控制下

fiei3ece

fiei3ece4#

@crazyair 我这边碰到的问题是Form.Item包裹多个noStyle的Form.Item时,我想校验的时候下方只出现第一个错误..
现在是下方会出现下级所有Form.Item的报错信息,validateFirst属性控制不了..

https://codesandbox.io/s/fuzayidiandekongjian-antd4123-forked-07t65?file=/index.js
这个链接里下面那个就是我想要的效果,但是我是用未公开的api实现的 https://github.com/ant-design/ant-design/issues/29350,咨询了下不推荐使用
所以我想框架内部方不方便提供属性控制下

上面的自定义 validator 对于使用者来说比较可控, _internalItemRender 中使用 errorList.props.children.props.errors 比较黑

dphi5xsq

dphi5xsq5#

FormItem 支持 API 方面还得考虑下怎么实现

h5qlskok

h5qlskok6#

@crazyair 我这边碰到的问题是Form.Item包裹多个noStyle的Form.Item时,我想校验的时候下方只出现第一个错误..
现在是下方会出现下级所有Form.Item的报错信息,validateFirst属性控制不了..
https://codesandbox.io/s/fuzayidiandekongjian-antd4123-forked-07t65?file=/index.js
这个链接里下面那个就是我想要的效果,但是我是用未公开的api实现的 https://github.com/ant-design/ant-design/issues/29350,咨询了下不推荐使用
所以我想框架内部方不方便提供属性控制下

上面的自定义 validator 对于使用者来说比较可控, _internalItemRender 中使用 errorList.props.children.props.errors 比较黑

https://codesandbox.io/s/fuzayidiandekongjian-antd4123-forked-07t65?file=/index.js
自定义 validator实现这个比较麻烦,参考第3个,需要在第一个输入框加自定义校验并设置关联第二个输入框,然后取消第二个输入框的校验才能达到一样的效果,逻辑也有点怪怪的

大佬最好能把 _internalItemRender 也整理个开放api出来,自定义错误展示方式需求 应该也很多.(我现在有悬浮错误提示的需求,没办法,还是悄悄用了这个api)

errorList.props.children.props.errors 改这个确实是找不到简单方案了,临时先暴力改了:)

相关问题