T
TanStack•5mo ago
rare-sapphire

Form field error type

Hi there! I'm using TanStack form with Zod Validation and was wondering if it's correct, that errors are of type any and I have to cast them to ZodIssue. I followed the basics examples on the website. Am I missing something? Form looks like this: 
  const form = useAppForm({
    defaultValues: {
      email: "",
      password: "",
    },
    validators: {
      onSubmit: z.object({
        email: z.string().email(),
        password: z.string().min(8, "Password is too short"),
      }),
    },
    onSubmit: ({ value }) => {
      loginMutation.mutate(value);
    },
  });
  const form = useAppForm({
    defaultValues: {
      email: "",
      password: "",
    },
    validators: {
      onSubmit: z.object({
        email: z.string().email(),
        password: z.string().min(8, "Password is too short"),
      }),
    },
    onSubmit: ({ value }) => {
      loginMutation.mutate(value);
    },
  });
No description
5 Replies
foreign-sapphire
foreign-sapphire•5mo ago
where do you access the field? with useFieldContext()?
rare-sapphire
rare-sapphireOP•5mo ago
yes, with const field = useFieldContext<string>(); in a custom field component, registered with createFormHook
foreign-sapphire
foreign-sapphire•5mo ago
if so, TypeScript is correct that the error could be anything. Consider these two forms: 
const form1 = useAppForm({
    defaultValues: {
      email: "",
      password: "",
    },
    validators: {
      onSubmit: z.object({
        email: z.string().email(),
        password: z.string().min(8, "Password is too short"),
      }),
    },
  });

const form2 = useAppForm({
    defaultValues: {
      email: "",
      password: "",
    },
    validators: {
      onSubmit: () => ({
        fields: {
          email: 404
        }      
      }),
      }),
    },
    onSubmit: ({ value }) => {
      loginMutation.mutate(value);
    },
  })
}
const form1 = useAppForm({
    defaultValues: {
      email: "",
      password: "",
    },
    validators: {
      onSubmit: z.object({
        email: z.string().email(),
        password: z.string().min(8, "Password is too short"),
      }),
    },
  });

const form2 = useAppForm({
    defaultValues: {
      email: "",
      password: "",
    },
    validators: {
      onSubmit: () => ({
        fields: {
          email: 404
        }      
      }),
      }),
    },
    onSubmit: ({ value }) => {
      loginMutation.mutate(value);
    },
  })
}
Both can access your field component: 
<form1.AppField name="email">
  {field => <field.YourComponent/>} // error: Standard schema issue[]
</form1.AppField>

<form2.AppField name="email">
  {field => <field.YourComponent/>} // error: number
</form2.AppField>
<form1.AppField name="email">
  {field => <field.YourComponent/>} // error: Standard schema issue[]
</form1.AppField>

<form2.AppField name="email">
  {field => <field.YourComponent/>} // error: number
</form2.AppField>
Generally, I would go for the following flow when working inside field components: * Is the error typeof error === 'string' ? => send error directly * Is the error null or undefined? => send nothing * Is the error an object and has a message property of type string? => send error.message ZodIssues would be the third option
rare-sapphire
rare-sapphireOP•5mo ago
I understand. As TanStack claims no generics needed, type inference everywhere, I was surprised to see an any value where type casting is necessary. Anway thanks for your response 🙂
foreign-sapphire
foreign-sapphire•5mo ago
No problem! Yes, the type inference isn't very strong inside of field components. The type inference of errors is mostly useful when working in the same layer as the form itself.

Did you find this page helpful?