最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to show Antd form validation error message at below the input field? - Stack Overflow

programmeradmin4浏览0评论

I have this structure as shown in the image below. These are fields that I can add, the limit is three. There is a validation of these fields, validation if the license plate of the vehicle is correct. If the vehicle's license plate is invalid it will show the error message, but the message is one below the other. How can I put this error message right under each respective field?

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

I have this structure as shown in the image below. These are fields that I can add, the limit is three. There is a validation of these fields, validation if the license plate of the vehicle is correct. If the vehicle's license plate is invalid it will show the error message, but the message is one below the other. How can I put this error message right under each respective field?

<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>
  );
Share Improve this question asked Mar 20, 2021 at 18:42 FranciscoMFranciscoM 911 gold badge1 silver badge12 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 5

Removing the noStyle property on the Form.Item worked for me.

According the documentation and your code, you don't need this line :

<Form.ErrorList errors={errors} /> 

Check this demo (from Ant Design documentation) : https://codesandbox.io/s/kli3h?file=/index.js:3032-3034

发布评论

评论列表(0)

  1. 暂无评论