We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
remix-validated-form
@remix-validated-form/with-zod
@remix-validated-form/with-yup
zod-form-data
"zod": "3.22.4", "zod-form-data": "2.0.2"
http://www.google.com
I have a form with a multi select options. So when selected, it should get an array of object
'use client'; import { zodResolver } from '@hookform/resolvers/zod'; import { useForm, FormProvider } from 'react-hook-form'; import { ArticleSchema } from '@/validations/article.validations'; import MultiSelectField from '@/components/forms/fields/MultiSelectField'; import z from 'zod'; import { zfd } from 'zod-form-data'; // -------------------------------------- // // --------------- Schema --------------- // // -------------------------------------- // const ArticleSchema = zfd.formData({ categories: zfd.json( z.array( z.object({ label: z.string(), value: z.string(), }) ) ) }) // -------------------------------------- // // ----------- Select options ----------- // // -------------------------------------- // const categoriesOptions = [ { label: "Science", value: "science" }, { label: "Geopolitics", value: "geopolitics" }, { label: "Sports", value: "sports" } ] const ArticleForm = () => { const form = useForm<z.infer<typeof ArticleSchema>>({ resolver: zodResolver(ArticleSchema), }); const action = (values: FormData) => { console.log('categories: ', values.get("categories")); // it returns null } return ( <FormProvider {...form}> <form action={action} > <MultiSelectField name="categories" options={categoriesOptions} /> <button type="submit">Save</button> </form> </Form> ); }; export default ArticleForm;
We should see something like
const categoriesOptions = [ { label: "Science", value: "science" }, ]
instead of null
null
I have also tried the schema:
zfd.formData({ categories: zfd .repeatable( z.array( z.object({ label: zfd.text(), value: zfd.text(), }) ) ) })
The text was updated successfully, but these errors were encountered:
I don't know the implementation details of the multi select input, but my guess is that it doesn't include an actual input element.
I would need a reproduction in order to help more.
Sorry, something went wrong.
If I retrieves the input value directly from the form I got the expected values for the multi select input.
const action = (values: FormData) => { console.log('categories: ', values.get("categories")); console.log('form categories: ', form.getValues()?.categories); }
The log result:
categories: null form values: [ { "label": "Science", "value": "science" }, { "label": "Sport", "value": "sport" } ]
sorry, it's an issue with React Hook Form
No branches or pull requests
Which packages are impacted?
remix-validated-form
@remix-validated-form/with-zod
@remix-validated-form/with-yup
zod-form-data
What version of these packages are you using?
Please provide a link to a minimal reproduction of the issue.
http://www.google.com
Steps to Reproduce the Bug or Issue
I have a form with a multi select options.
So when selected, it should get an array of object
Expected behavior
We should see something like
instead of
null
Screenshots or Videos
zod-form-data-array-of-object-issues.mp4
Platform
Additional context
I have also tried the schema:
The text was updated successfully, but these errors were encountered: