Surprised that fields is not typed

[tmcw]

This might've been asked before, but I couldn't find any previous discussions via search. I was following the initial guide to using conform and was pretty surprised that the value of fields, in code like

  const [form, fields] = useForm({
    // Configure when each field should be validated
    shouldValidate: 'onBlur',
    // Optional: Required only if you're validating on the server
    lastResult,
    // Optional: Client validation. Fallback to server validation if not provided
    onValidate({ formData }) {
      return parseWithZod(formData, { schema });
    },
  });

Is untyped. I would kind of expect this to be able to mirror the fields that zod is expecting for form data, even if it requires a little handholding. It looks like useForm is generic and can take a schema, but the examples don't showcase this at all. Maybe I'm missing something about the intended way to use useForm?

[edmundhung]

The useForm hook will try to infer the schema based on either the onValidate handler or initialValue. You can see a working example here. If it doesn't work for you, it could be the zod schema not properly inferred because of some uncommon settings or there are something strange with your typescript configuration.

Can you share your zod schema here?

[tmcw]

Thanks - I had missed this because initialValue and onValidate were both optional and I was just including lastResult and expecting that to drive inference!

[denkasyanov]

I have similar issue.
In my case I initially only had constraint in useForm options and fields variable was not typed.
Then I added onValidate and fields became typed.

Code looks something like that:

import { z } from "zod";
import { getZodConstraint, parseWithZod } from '@conform-to/zod'
import { ActionFunctionArgs } from "@remix-run/node";

import {useForm} from "@conform-to/react"
import { Form, useActionData } from "@remix-run/react";

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(6),
});

const constraint = getZodConstraint(schema);

export async function action({request}: ActionFunctionArgs) {
  // action
}


export default function SignUp() {

  const lastResult = useActionData<typeof action>();
  
  const [form, fields] = useForm({
    lastResult,
    constraint,
    // onValidate({ formData }) {
    //   return parseWithZod(formData, { schema })
    // }
  });

  const test = fields.  // I only have field suggestions here with `onValidate` 

  return (
    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
      <p>Sign Up</p>
      // <Form />
   </div>
  );
}

Isn't it more straightforward for types to be enforced with just the constraint, since it has access to the zod schema?

Also, if I understand it correctly (not 100% sure after reading the docs), onValidate is used for validation on client. How to enforce types in case where there is no client side validation?