首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在输入字段下面显示Antd表单验证错误消息?

如何在输入字段下面显示Antd表单验证错误消息?
EN

Stack Overflow用户
提问于 2021-03-20 18:42:35
回答 2查看 5.9K关注 0票数 0

我有这个结构,如下图所示。这些是我可以添加的字段,限制是三个。对这些字段进行验证,如果车辆的牌照是正确的,则进行验证。如果车辆的牌照是无效的,它将显示错误信息,但该信息在另一个下面。如何将此错误消息正确地放在每个字段下?

代码语言:javascript
运行
复制
<S.FormAddPlate>
      {fields.map((field) => (
        <>
          <Form.Item
            {...field}
            validateTrigger={["onChange", "onBlur"]}
            hasFeedback
            key={field.key}
            rules={[
              {
                pattern: validationPlate,
                message: useTranslation({ id: "invalid_plate" }),
              },
            ]}
            noStyle
          >
            <Input
              maxLength={7}
              onKeyPress={(e) => {
                validatePlate(e, validationSpecialCharacters);
              }}
            />
          </Form.Item>
        </>
      ))}
      <Form.Item>
        {fieldsCount < 3 && (
          <S.AddButtonPlate
            onClick={() => {
              add();
              setFieldsCount(fieldsCount + 1);
            }}
            icon={<PlusOutlined className="addButton" />}
          ></S.AddButtonPlate>
        )}
        <Form.ErrorList errors={errors} /> 
      </Form.Item>
    </S.FormAddPlate>
  );
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-05-04 19:38:06

移除Form.Item上的Form.Item属性对我是有效的。

票数 2
EN

Stack Overflow用户

发布于 2021-03-20 19:19:40

根据文档和代码,您不需要这一行:

代码语言:javascript
运行
复制
<Form.ErrorList errors={errors} /> 

检查此演示程序(来自Ant文档):https://codesandbox.io/s/kli3h?file=/index.js:3032-3034

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/66725210

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档