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

• javascript
• reactjs
• antd

2 Answers 2

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