Conform action utils
Loading "Form Data Parsing with Conform"
Run locally for transcripts
๐จโ๐ผ Having to create an object out of
formData
is troublesome. We can actually
call Object.fromEntries(formData)
and that'll work for our simple case, but
it's pretty limited and doesn't work for nested objects (which we'll get to
later). So let's use Conform's utilities to update our action
to parse our
formData
and parse it with Zod for us:Here's the relevant part of the example from the background info we saw earlier:
import { getFieldsetConstraint, parse } from '@conform-to/zod'
import { Form } from '@remix-run/react'
import { json, redirect } from '@remix-run/node'
import { z } from 'zod'
const LoginSchema = z.object({
email: z
.string({ required_error: 'Email is required' })
.email('Email is invalid'),
password: z.string({ required_error: 'Password is required' }),
})
export async function action({ request }: ActionFunctionArgs) {
const formData = await request.formData()
const submission = parse(formData, {
schema: LoginSchema,
})
if (submission.intent !== 'submit') {
// the user hasn't submitted the form yet
// this will happen if Conform is validating the form before submission
// (like if we configure Conform to validate onBlur)
// We'll not add this yet, we'll get to it later.
return json({ status: 'idle', submission } as const)
}
if (!submission.value) {
// there's no value because there is an error in the form
return json({ status: 'error', submission } as const, {
status: 400,
})
}
const { email, password } = submission.value
const isAuthenticated = await authenticate({ email, password })
if (!isAuthenticated) {
// set the form error:
submission.error[''] = ['Invalid email or password']
return json(
{
status: 'error',
submission,
} as const,
{ status: 401 },
)
}
return redirect('/dashboard')
}
Could you update our form to use this in the
action
? This will require a few
changes in the UI as well because the errors are slightly different and we'll
be passing back a submission
object instead of just the errors
.๐ฆ I'd like you to check out what the
submission
object looks like in the
network tab or log it to the console. Why do you suppose all that information is
necessary?