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
2 Answers
Reset to default 5Removing 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