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

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>
    )}
  />
)

  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

as schema

to the default values but the actual type should be validated onSubmit not by typescript already.

TanStack•3mo 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

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>
    )}
  />
)

  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

as schema

to the default values but the actual type should be validated onSubmit not by typescript already.

Form field allow null

Form field allow null

Similar Threads