Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Antd I can't get Errors on Input onChange event

In Antd, I need to get errors in onChange event but even there is a error in field, While typing in that field I can’t see errors. For example ;

https://stackblitz.com/edit/react-qurm1n?file=demo.tsx

Step by step for get this issue;

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

  • Open console & Press Submit Button. In console, You will see errors in 2 field. In username & password.
  • Start Typing in username and check console. There is no error in username even its not valid yet.

How can I solve this issue ? How can i see errors in onChange event ? Thanks for help!

I tried do it with onBlur and yes its working but i need do it in onChange event. I assume antd doesn’t show error while field is onValidating state.

>Solution :

Seems like a timing issue, the form is validated before the form is updated, a simple fix, would be to wrap the code on a setTimeout!

  <Form.Item<FieldType>
    label="Username"
    name="username"
    rules={[{ required: true, min: 9, message: 'Error Message' }]}
  >
    <Input
      onChange={() => {
        setTimeout(() => console.log(form.getFieldsError()));
      }}
    />
  </Form.Item>

Stackblitz Demo

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading