Default Values on server

[hauptrolle]

Hey 👋

is it possible to set the defaultValues on the server?
When using the useRemixForm hook for settings the defaultValues, you see the default values flicker on page load and the values are not set when js is disabled.

Cheers,
Achim

[richardvanbergen]

@hauptrolle I know it's probably too late but I think this is the job of the developer to solve. I don't think remix-hook-form could do this cleanly. This is how I solved it:

export const action = async ({ request }: ActionFunctionArgs) => {
  const { errors, data, receivedValues } = await getValidatedFormData<FormData>(
    request,
    zodResolver(schema)
  );

  // we need to case the receivedValues to the type of our schema
  const defaultValues = receivedValues as z.infer<typeof schema>;

  if (errors) {
    return json({ errors, defaultValues });
  }

  // this is just for testing purposes, you'd probably want to process and redirect
  return json({ data, defaultValues });
};

export default function Login() {
  // get the action data from the action above
  const data = useActionData<typeof action>();

  // pass in as defaultValues
  return <LoginForm defaultValues={data?.defaultValues} />;
}

Then in my login form

interface FormProps extends React.ComponentProps<typeof Form> {
  defaultValues?: z.infer<typeof schema>;
}

export function LoginForm(props: FormProps) {
  const { defaultValues, ...formProps } = props;

  const methods = useRemixForm<z.infer<typeof schema>>({
    mode: "onSubmit",
    resolver: zodResolver(schema),
    // load the default values here
    defaultValues,
  });

  return (
    <RemixFormProvider {...methods}>
      {/* my form components */}
    </RemixFormProvider>
  )
}

[hauptrolle]

Hey @richardvanbergen thank you for your reply 🙇
Thats exacly how I did it aswell. When you now disable JS on the page, you don't see any default values 😞