Best practices for handling nested fields and long field names?

[tparvi]

If you have simple form, it is easy to write useField('form.email) but how do you handle the field names for complex forms with nested items? E.g. User can specify multiple opening hours (array) of different types (normal, weekend, holidays so again an array) which means the field path becomes something like:

openingHours[X].normal[Y].times.from

When using <Field or useField hook I need to know both X and Y in order to generate the field name. In some cases I could use context but it feels lot of extra work just to store one number. And it still doesn't solve the issue that I need to know the other parts. So in this case when I use useField() hook in my <From component I need to know the full path to that item.

[johnrom]

I'm not sure what your X and Y are supposed to represent, but let's pretend it's a restaurant. What I would generally do is create a "Shape" which a Custom Field understands, let's say your shape is:

I'm using TypeScript, though it will work fine without it. TS allows me to explain the shapes better

interface StoreHours = {
  normal: StoreHoursMap,
  holiday: StoreHoursMap
}

type StoreHoursMap = Record<number, Hours>;

interface Hours {
   times: {
      from: string,
      to: string,
  }
};

Now you have a number of different types. These can be broken up in a million different ways depending on how reusable you want the fields to be. For example:

interface TimeFieldProps {
  name: string,
  // etc
}
const TimeField = (props: TimeFieldProps) => {
  <Field {...props} />
}

interface HoursFieldProps {
  name: string,
}
const HoursField = (props: HoursFieldProps) => {
  return <>
    <TimeField name={`${props.name}.from`} />
    <TimeField name={`${props.name}.to`} />
  </>
}

interface WeeklyHoursFieldProps {
  name: string;
}
const WeeklyHoursField = (props: WeeklyHoursFieldProps) => {
  return <>
    <HoursField name={`${props.name}.0`} label="Sunday" />
    <HoursField name={`${props.name}.1`} label="Monday" />
    <HoursField name={`${props.name}.2`} label="Tuesday" />
    <HoursField name={`${props.name}.3`} label="Wednesday" />
    <HoursField name={`${props.name}.4`} label="Thursday" />
    <HoursField name={`${props.name}.5`} label="Friday" />
    <HoursField name={`${props.name}.6`} label="Saturday" />
  </>
}

interface StoreHoursFieldProps {
  name: string;
}

const StoreHoursField = (props: StoreHoursFieldProps) => {
  return <>
    <WeeklyHoursField name={`${props.name}.normal`} label="Normal Hours" />
    <WeeklyHoursField name={`${props.name}.holiday`} label="Holiday Hours" />
  </>
}

const MyForm = () => {
  return <Formik {...formikProps}>
    <StoreHoursField name="openingHours" />
    <StoreHoursField name="dinnerHours" />
    <StoreHoursField name="lunchHours" />
    <StoreHoursField name="brunchHours" />
  </Formik>
}

Seems like a lot of work for one field, until you realize you've done the work already when you need a TimeField for Reservations, for example.

For accessibility you'll want to add fieldsets and make sure you're using labels / legends!

[tparvi]

This is exactly how I am doing it right now but I was wondering if there is other way. We are using constants for some of the field paths but still it is quite brittle solution. Typo somewhere and some field or parts of the form do not work.

[johnrom]

I have a test of a strongly typed Formik #3152 which you could do something like:

interface StoreHoursFieldProps<Values> {
  name: PathMatchingValue<StoreHours, Values>,
}

Now, the name you pass to StoreHoursField would have to match a name within Values which matches the shape of Store Hours, aka { normal: StoreHoursMap, holiday: StoreHoursMap }. It's very hard to use, so it definite wouldn't be a v3. Maybe a v3.1 if we can determine an easier API.

It's not ready for prime time, especially when it comes to nesting fields in the example above, as Typescript cannot match the prefix name to a child field, like:

const name: PathMatchingValue<StoreHoursMap, Values> = `${name}.normal`;

So my answer here is... there's not really a better way with Formik at the moment.