如何防止蚂蚁设计表单验证消息中断和窃听

Question

使用Ant设计表单是一种非常好的做法，因为它具有漂亮的UI和简单的用法。尽管我在UI方面遇到了一些奇怪的问题。当我故意填写错误的输入时，它会用动画显示错误信息，但在修复后，蚂蚁的行为有点奇怪。如何修复？？？

[2] 这是我的表单代码

<Form form={form} layout="vertical" onFinish={onFinish} autoComplete="off">
<Form.Item>Item name="message" label="Message" rules={[{ required: true, message: messages.description }]} > <Input /> </Form.Item>
<Form.Item name="rating" label="Rate Training">
<>
<Rate onChange={setValue} value={value} />
<span className="ant-rate-text"></span>
</>
</Form.Item>
<Form.Item>
<Button loading={isFeedbackSentLoading} type="primary" htmlType="submit" style={{ width: "100%" }}>
Submit
</Button>
</Form.Item>
</Form>

Answer 1

Here Is My Answer

输入和标签div有一个名为ant-form-item-control的父div

Ant Design在错误输入后添加了一个新的div元素，其中包含名为ant-form-item-explain-error的错误消息，并在修复输入要求后删除了它

ant-form-item-explain-errordiv在浏览器中添加和删除空间，这就是为什么它会出现奇怪的故障和错误。

[1] To solve the issue we need to give a fixed space for the parent of both Input, label and error message if available at the moment

.ant-form-item-control {
height: 60px;
}

[2] There is another issue with responsivity when using on mobile the styles will not trigger because Ant Design disables It under the hood

在开发工具中有一个样式选项卡，你可以找到以下样式的

@media (max-width: 575px) {
.ant-form .ant-form-item .ant-form-item-label, 
.ant-form .ant-form-item .ant-form-item-control 
{
/* flex: 0 0 100%; */
max-width: 100%;
}
}

您只需要禁用样式flex: 0 0 100%;，该样式也适用于移动