带有 Chakra UI 的 React-hook-form 不会在 NextJS 中显示验证错误消息

Question

我一直在尝试使用 React-hook-form 和 Chakra UI 组件库在 Next.js 中实现登录表单，但我无法弄清楚为什么我的表单验证错误消息不会显示，尽管遵循了 React-hook-形成文档相当彻底。我将其设置为用户名必须为 2-30 个字符长，密码必须至少为 8 个字符长；两个输入字段都是必需的。提交有效的表单后，将弹出一条警报，表示提交成功。然而，在提交无效表单时，错误消息应显示在无效输入下方，但事实并非如此。然而，我注意到无效的输入字段将在提交时获得焦点。

这是我正在查看的内容：https ://codesandbox.io/s/quirky-wave-jgpwf

提前致谢。

Answer 1

我想这可能是因为<FormControl isInvalid={errors.name}>，你检查了errors.name，但你没有name。你的组件被命名为username，password

我建议你先尝试console.log(errors)看看里面有什么。

<FormControl isInvalid={errors.username || errors.password}>可能有帮助。