如何在输入字段下方显示 Antd 表单验证错误消息？

Question

我的结构如下图所示。这些是我可以添加的字段，限制为三个。验证这些字段，验证车辆的牌照是否正确。如果车辆的牌照无效，它会显示错误消息，但消息是一个在另一个下面。如何将此错误消息放在每个相应字段的正下方？

<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>
  );

Answer 1

根据文档和您的代码，您不需要这一行：

<Form.ErrorList errors={errors} />

查看此演示（来自 Ant Design 文档）：https://codesandbox.io/s/kli3h?file=/index.js:3032-3034

Answer 2

删除 Form.Item 上的 noStyle 属性对我有用。

如何在输入字段下方显示 Antd 表单验证错误消息？

How to show Antd form validation error message at below the input field?

javascript

reactjs

antd