next.js 带有zod解析器可选字段的React钩子窗体

mepcadol 于 2022-12-29 发布在 React

关注(0)|答案(1)|浏览(169)

我想创建一个带有React-hook-form和zod resolver的表单，其中所有字段都是可选的，但尽管在zod模式中将字段设置为可选，但字段仍然是必需的：

const schema = z.object({
    name: z.string().min(3).max(50).optional(),
    description: z.string().min(3).max(255).optional(),
    image: clientImageSchema.optional(),
  })
const {...} = useForm({ resolver: zodResolver(schema) })

当提交空白输入的表单时，它会按要求验证字段。2错误或错误在哪里？

next.js

来源：https://stackoverflow.com/questions/73715295/react-hook-form-with-zod-resolver-optional-field

1条答案

按热度按时间

5lhxktic1#

我也遇到过同样的问题。可能有一些关于空字符串处理的bug或问题。枚举https://github.com/react-hook-form/react-hook-form/issues/3985也发生过类似的事情。
目前看来，仅仅使用.preprocess()运行字段似乎是可行的，我的意思是：

const schema = z.object({
  // Watch out, z.preprocess takes two arguments
  foo: z.preprocess(
    (foo) => {
      // this line won't work
      // return foo

      // this line will work, dunno why
      // console.log(typeof email)

      // I'm using this
      if (!foo || typeof foo !== 'string') return undefined
      return foo === '' ? undefined : foo
    },
    z
      .string()
      .email({
        message: 'Please correct your email address',
      })
      .optional(),
  ),
})

所以这将给予我们一个可选的字段，将被验证为一个电子邮件字段一旦非空。可能有一些其他的方式，但这是我发现。

赞(0）回复(0）举报 2022-12-29

我来回答

next.js 带有zod解析器可选字段的React钩子窗体

1条答案

相关问题

热门标签

最新问答