TanStackT
TanStack•10mo ago•
10 replies
brilliant-lime

using i18n (react-i18next) with tanstack form

How do I use i18n with ts form in a typesafe way? Currently I'm doing it like this:
//validation.tsx
export const zCreateTaskInputSchema = (t: TFunction<'tasks'>) =>
  z.object({
    title: z.string().min(1, t("title"))
  });

//form.tsx
const { t } = useTranslation("tasks");

const form = useAppForm({
  validators: {
    onChange: zCreateTaskInputSchema(t),
  },
  defaultValues: {
    title: "",
  }
});

console.log(t('title')) //<-- text changes when locale changes
console.log(form.getAllErrors()); //<--- error text stays the same when locale changes, I need to retrigger validation for it to take effect


But the problem is that the form's errors dont change when the locale changes (I guess this is because form uses signals under the hood and doesn't pick up the changes from react). Is there a recommended way to do this in a typesafe way so the locale changes get propagated to the form's state?
Was this page helpful?