Antd I can't get Errors on Input onChange event

Question

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;

• 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.

Answer 1

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