反应挂钩形式验证是在Onchange事件之后完成的

发布于 2025-02-13 22:31:34 字数 590 浏览 1 评论 0原文

在有效时，试图根据其他表单字段的输入填写某些表单字段。相当新的反应挂钩形式，所以也许我在看这些错误。我面临的问题是，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);
        },
    })}
/>

“反应钩形式”：“^7.33.1”

因此，当触发onchange时，错误是空的，因此它继续使用无效的数据。

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

原文

Trying to fill in some form fields based on a input of another form field when this is valid.
Fairly new to react hook forms, so perhaps I'm looking at this all wrong.
Issue I'm facing is that the onchange is triggered sooner than the validation.

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"

So when the onChange is triggered, the errors is empty, so it continues with invalid data.

How can I make sure the validation is done before the onChange event.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

风筝在阴天搁浅。 2025-02-20 22:31:35

尝试添加等待trigger（）;在检查errors.postalcode之前。

const {
    handleSubmit,
    formState: { errors},
    trigger, // add this
} = useForm<FormValues>({       
    mode: 'onChange'    
});
const getAddress = (e) => {
    await trigger(); // add this
    if (errors.postalCode !== undefined) {
        return;
    }

    //do stuff
};

链接到文档： https://react-hook-form.com/docs/docs/docs/docs/useform/触发
这会触发验证。

Try adding await trigger(); before checking errors.postalCode.

const {
    handleSubmit,
    formState: { errors},
    trigger, // add this
} = useForm<FormValues>({       
    mode: 'onChange'    
});
const getAddress = (e) => {
    await trigger(); // add this
    if (errors.postalCode !== undefined) {
        return;
    }

    //do stuff
};

Link to documentation: https://react-hook-form.com/docs/useform/trigger
This triggers validation.

回复收藏 0 原文

~没有更多了~