TanStackT
TanStack•5d ago•
22 replies
slow-yellow

Form field allow null

Hi guys, im looking into migrating Shadcn using radix to BaseUI. One change is that an Select field onChangeValue can be null where this isnt possible with RadixUI. I use Zod to validate the tanstack form. Usually we do this
  const schema = z.object({
    currency: z.string(),
  });
  type schema = z.infer<typeof schema>;
  const form = useAppForm({
    validators: {
      onSubmit: schema,
    },
    defaultValues: {
      currency: ''
    } as schema,
    onSubmit: async ({ value }) => {
    
    },
  });

return (
  <form.AppField
    name={'currency'}
    children={(field) => (
      <field.Field>
        // handleChange doesnt accept null
        <Select onValueChange={field.handleChange}>
        </Select>
      </field.Field>
    )}
  />
)

But when doing this obviously the currency cant be null. How can go around this? We obviously want autocomplete on the name field so we should add the as schema to the default values but the actual type should be validated onSubmit not by typescript already.
Was this page helpful?