React Hook 表单验证是在 onChange 事件之后完成的

Question

在有效时尝试根据另一个表单字段的输入填写某些表单字段。 对反应钩子形式相当陌生，所以也许我对这一切的看法都是错误的。 我面临的问题是 onchange 的触发时间早于验证时间。

const {
    handleSubmit,
    formState: { errors},
} = useForm<FormValues>({       
    mode: 'onChange'    
});

const getAddress = (e) => {

    if (errors.postalCode !== undefined) {
        return;
    }

    //do stuff
};

<input
    type={'text'}
    {...register('postalCode', {
        onChange: (e) => {
            getAddress(e);
        },
    })}
/>

“react-hook-form”：“^7.33.1”

因此，当触发 onChange 时，错误为空，因此继续处理无效数据。

如何确保验证在 onChange 事件之前完成。

Answer 1

在检查

await trigger();

之前尝试添加

errors.postalCode

。

const getAddress = (e) => {
    await trigger();
    if (errors.postalCode !== undefined) {
        return;
    }

//do stuff

};