ant-design / pro-components

🏆 Use Ant Design like a Pro!
https://pro-components.antdigital.dev
MIT License
4.04k stars 1.29k forks source link

ProFormText组件,max校验有bug🐛[BUG] #2712

Closed whaty closed 3 years ago

whaty commented 3 years ago

🐛 bug 描述

ProFormText组件,从零开始输入,校验是正常的,但是输入完,做修改功能的时候,字段长度没有超长,也会提示字段超长。只要开始往框里输入任何信息之后,提示就没有了。目前我解决不了这个bug,得修改底层代码。

image

image

whaty commented 3 years ago

谁能尽快帮看看,给点意见,谢谢

DerrickTel commented 3 years ago

怎么复现,我试了一下你的代码,我是没毛病的...看样子像是antd的bug,可以看看你的版本号之类的吗?或者给一个codesandbox

whaty commented 3 years ago

怎么复现,我试了一下你的代码,我是没毛病的...看样子像是antd的bug,可以看看你的版本号之类的吗?或者给一个codesandbox

我这涉及到要从远程获取数据,没法放到外面演示,但是你方便远程我嘛?我给你演示,你直接看

whaty commented 3 years ago

外面

怎么复现,我试了一下你的代码,我是没毛病的...看样子像是antd的bug,可以看看你的版本号之类的吗?或者给一个codesandbox

我怀疑和底层的校验插件有关系,一直提示这个信息 image

whaty commented 3 years ago

怎么复现,我试了一下你的代码,我是没毛病的...看样子像是antd的bug,可以看看你的版本号之类的吗?或者给一个codesandbox

ant 系列的版本号: image

chenshuai2144 commented 3 years ago

看起来是因为 string 变成了一个 object。我这里也是无法复现

github-actions[bot] commented 3 years ago

Hello @whaty. Please provide a online reproduction by forking this link https://codesandbox.io/ or a minimal GitHub repository.

你好 @whaty, 我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击 此处 创建一个 codesandbox 或者提供一个最小化的 GitHub 仓库。

whaty commented 3 years ago

Hello @whaty. Please provide a online reproduction by forking this link https://codesandbox.io/ or a minimal GitHub repository.

你好 @whaty, 我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击 此处 创建一个 codesandbox 或者提供一个最小化的 GitHub 仓库。

麻烦看下吧 https://codesandbox.io/s/thirsty-monad-rozi1?file=/App.tsx

whaty commented 3 years ago

看起来是因为 string 变成了一个 object。我这里也是无法复现

https://codesandbox.io/s/thirsty-monad-rozi1?file=/App.tsx

麻烦看下吧,这个是必现的!点击新建表单》确定,现象就出来了

whaty commented 3 years ago

Hello @whaty. Please provide a online reproduction by forking this link https://codesandbox.io/ or a minimal GitHub repository. 你好 @whaty, 我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击 此处 创建一个 codesandbox 或者提供一个最小化的 GitHub 仓库。

麻烦看下吧 https://codesandbox.io/s/thirsty-monad-rozi1?file=/App.tsx

麻烦看下吧,这个是必现的!点击新建表单》确定,现象就出来了

whaty commented 3 years ago

怎么复现,我试了一下你的代码,我是没毛病的...看样子像是antd的bug,可以看看你的版本号之类的吗?或者给一个codesandbox

https://codesandbox.io/s/thirsty-monad-rozi1?file=/App.tsx

麻烦看下吧,这个是必现的!点击新建表单》确定,现象就出来了

chenshuai2144 commented 3 years ago

点进去看了看好像没问题,是不是还有什么隐含条件

image

DerrickTel commented 3 years ago
<ProFormText 
            label={"age"}
            name="age"
            placeholder="请输入"
            tooltip="最长为 10 字符"
            formItemProps={{
              rules: [
                {
                  max: 10 ,
                  message: '不能大于 10 个字符',
                  type: 'string',
                },
              ],
            }}

          />

https://ant.design/components/form-cn/#Rule

DerrickTel commented 3 years ago

因为你的age传过来是一个number,他的max按数字的最大值10来取了,而你的默认值又是28.所以在number中是10<28所以校验没过。你的max应该是希望是stirng的长度吧?类型限制一下就好了 @whaty 。看看这样有没有解决你的问题。还是我理解错了?

whaty commented 3 years ago

因为你的age传过来是一个number,他的max按数字的最大值10来取了,而你的默认值又是28.所以在number中是10<28所以校验没过。你的max应该是希望是stirng的长度吧?类型限制一下就好了 @whaty 。看看这样有没有解决你的问题。还是我理解错了?

有可能是你说的这个问题,我加上type: 'string',现象还在,但是我把接口返回的字段改成string,就没有这个现象了

whaty commented 3 years ago

点进去看了看好像没问题,是不是还有什么隐含条件

image

现象还在的呀!很简单的就浮现了,你别把代码复制到你本地去看,从你发的图片可以看出,你没有在我发的地址中查看。请看:

https://codesandbox.io/s/thirsty-monad-rozi1?file=/App.tsx:122-134

image

whaty commented 3 years ago

因为你的age传过来是一个number,他的max按数字的最大值10来取了,而你的默认值又是28.所以在number中是10<28所以校验没过。你的max应该是希望是stirng的长度吧?类型限制一下就好了 @whaty 。看看这样有没有解决你的问题。还是我理解错了?

image

whaty commented 3 years ago

因为你的age传过来是一个number,他的max按数字的最大值10来取了,而你的默认值又是28.所以在number中是10<28所以校验没过。你的max应该是希望是stirng的长度吧?类型限制一下就好了 @whaty 。看看这样有没有解决你的问题。还是我理解错了?

可以仔细看下红框里的内容,提示不是标准的string?应该不支持在rule里面修改类型吧!对于number类型的,该怎么限制最大长度呢?

image

DerrickTel commented 3 years ago

image

DerrickTel commented 3 years ago

或者上面有一个正则匹配,len都可以试试看

whaty commented 3 years ago

或者上面有一个正则匹配,len都可以试试看

好的,多谢啦!你截图的url地址能发出来吗

DerrickTel commented 3 years ago

https://ant.design/components/form-cn/#Rule

whaty commented 3 years ago

https://ant.design/components/form-cn/#Rule

多谢,我这也是算阿里系列的深度用户了,ant design +ant design pro +proComponet + landing + dmui ,全部都用上了

DerrickTel commented 3 years ago

那你更要好好看文档了,大佬们辛辛苦苦写的文档和代码。解决完问题关一下issue哦