Check if a key exists in Fieldset

[jmaldon1]

I have a UI component that can take 2 different Schemas and therefore generate 2 different Fieldsets.

const [form, formFieldset] = useForm<FormSchemaCreate | FormSchemaCreateMany>({
  lastSubmission,
});

FormSchemaCreateMany is the same as FormSchemaCreate but with 1 extra required field called sets.

when I try to access the error message for sets like so, I get a type error:

<Form {...form.props}>
  {isCreateMany && (
    <TextField
      id="sets-input"
      name="sets"
      required={required}
      error={Boolean(formFieldset?.sets.error)}  // type error: "sets" doesn't exist on FormSchemaCreate
      helperText={formFieldset?.sets.error} // type error: "sets" doesn't exist on FormSchemaCreate
      inputProps={{
        inputMode: "numeric",
        pattern: "[0-9]*",
      }}
    />
  )}
  ... other form fields
</Form>

Is there a way to check if a key exists on a fieldset so I can type narrow, something like this:

const isSetsInFieldset = "sets" in formFieldset;

Currently the above snippet will always return false, however it does fix the type error.

[edmundhung]

This seems to work fine for me on v0.7.4:

const [form, { name, a, b }] = useForm<{ name: string, a: string; } | { name: string; b: string }>({
  lastSubmission,
});

console.log({ name, a, b });

Which version are you using? There were some improvements with union support back in v0.6.2.

Conform doesn't actually know about which fields you had on the form. The formFieldset object you refers to is a proxy and it generates the config dynamically based on the name/key you are accessing. That's why you can't check whether a certain field exists.

[jmaldon1]

Ah interesting, So I am passing the Fieldset into another UI component:

import { Fieldset, Submission, useForm } from "@conform-to/react";


type FormCreateSchema = z.output<typeof formCreateRepsSchema>;
type FormCreateManySchema = z.output<typeof formCreateManyRepsSchema>;

type myUIComponentProps = {
  formFieldset: Fieldset<FormCreateSchema> | Fieldset<FormCreateManySchema>;
};

export function MyMainComponent(): JSX.Element {
  const [form, formFieldset] = useForm<FormSchemaCreate | FormSchemaCreateMany>({
    lastSubmission,
  });
  return (
    <Form {...form.props}>
      <MyUIComponent formFieldset={formFieldset} />
    </Form>
  )
}

export function MyUIComponent(props: myUIComponentProps): JSX.Element {
  return
  ({isCreateMany && (
    <TextField
      id="sets-input"
      name="sets"
      required={required}
      error={Boolean(formFieldset.sets.error)}  // type error: "sets" doesn't exist on FormSchemaCreate
      helperText={formFieldset.sets.error} // type error: "sets" doesn't exist on FormSchemaCreate
      inputProps={{
        inputMode: "numeric",
        pattern: "[0-9]*",
      }}
    />
  )}
  ... other form fields)
}

Maybe I am typing the formFieldset prop incorrectly?

[edmundhung]

Maybe try this instead:

type myUIComponentProps = {
  formFieldset: Fieldset<FormCreateSchema | FormCreateManySchema>;
};

[jmaldon1]

yup that works, thanks!