ant-design / ant-design/pro-components
🐛[BUG]使用ModalForm加ProFormText渲染弹框表单,出现校验信息导致表单项高度变化的问题
- Dominant language
- TypeScript
- Stars
- 4.8k
- Forks
- 1.4k
- Avg merge
- 10h 44m
- Merged PRs (30d)
- 3
Description
提问前先看看:
https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md
### 🐛 bug 描述
使用ModalForm加ProFormText渲染弹框表单,当进行表单校验,错误信息出现或消失时,表单Item会高度变化,
我分析了官方demo,和我渲染的内容的dom,发现
官方demo渲染提示信息时,外层有一个div包裹,而我渲染的则没有,这个就是问题的原因
缺少了样式style="width: 0px; height: 24px;"
### 📷 复现步骤
### 🏞 期望结果
表单在校验信息出现和消失时,表单高度不会变化
### 💻 复现代码
title={id ? t({ id: 'F.编辑企业' }) : t({ id: 'F.添加企业' })} formRef={formRef} open={visible} onOpenChange={(v) => setVisible(v)} width="540px" onFinish={onFinish} >
### © 版本信息
- ProComponents 版本: ^2.8.2
- umi-max 版本:^4.3.36
- 浏览器环境 chrome 最新版本
- 开发环境 node 18
- antd:^5.4.0
### 🚑 其他信息
官方demo截图:

我代码运行的截图:

Contributor guide
Research direction
Start with the supplied reproduction using ModalForm and ProFormText, then compare its validation-message DOM with the official demo. The work is done when showing or hiding validation errors no longer changes the form item's height.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100