How to use strongly-typed formOptions?

[mfaux]

I'm following the App Router integration docs. I want to use my zod schema on both server and client, which the docs don't demonstrate 🙇.

I'm passing TaskFormData as a type parameter to formOptions so that defaultValues is strongly typed.

When I try adding a validatorAdapter to formOptions, I get a type error:

export const taskFormOpts = formOptions<TaskFormData>({
  defaultValues: {
    title: '',
    description: '',
    status: 'todo',
  },
  validatorAdapter: zodValidator(),
});

// Type error: Type 'Validator<unknown, ZodType<any, ZodTypeDef, any>>' is not assignable to type 'undefined'.

Thoughts?

[Balastrong]

It's not something specific to formOptions/nextjs as it follows the same typings of useForm: if you specify the type and you have a validatorAdapter you should also specify that on the types.

formOptions<TaskFormData, ZodValidator> should do the trick :)

It should probably be explicitly mentioned in the adapters section in the docs, I'll take care of that.

[mfaux]

Thanks a lot! It was probably obvious to those with more TypeScript experience. Appreciate the quick answer.