时间戳

首页 > 解决方案 > Ant Design Form.Item 中的自定义 validateStatus

reactjs - Ant Design Form.Item 中的自定义 validateStatus

问题描述

validateStatus只有在状态中设置时，我才想向我的 Form.Item 添加自定义result。如果不是，我希望它由验证规则生成：

<Form.Item
  name="email"
  rules={[{ required: true, type: 'email', message: 'Enter you email' }]}
  required
  validateStatus={result && (result.result === "success" ? "success" : "warning")}
  help={result && (result.result === "success" ? "You've subscribed successfully!" : "Your email is already subscribed")}
>

但这似乎不起作用。这是codeandbox的链接。您可以看到帮助消息正在工作，但validateStatus似乎不起作用，因为帮助消息始终保持灰色（当validateStatus设置为错误时它应该是红色的，或者当它设置为成功时应该是绿色的）。我该如何解决？

标签： reactjsantd

解决方案

我最终添加undefined到validateStatus：

<Form.Item
  name="email"
  rules={[{ required: true, type: 'email', message: 'Enter you email' }]}
  required
  validateStatus={result ? (result.result === "success" ? "success" : "warning") : undefined}
  help={result && (result.result === "success" ? "You've subscribed successfully!" : "Your email is already subscribed")}
>

还有一些自定义 CSS.ant-form-item-has-success .ant-form-item-explain {color: #52c41a;}将成功消息显示为绿色。

推荐阅读