[getValues] : return appropriate types from getValues for better complex multi-form design

[flyingonionman]

Version Number

7.43.9

Codesandbox/Expo snack

https://codesandbox.io/s/blazing-violet-kyn8w7?file=/src/App.tsx

Steps to reproduce

I have set up a crude copy of what I have for one of my projects. The point being

const FormSections = {
  personInfo: ["firstName", "age"],
  financeInfo: ["ccv", "expDate"]
} as const;

and types are set up using zod

const formSchema = z.object({
  firstName: z.string(),
  age: z.number(),
  ccv: z.number(),
  expDate: z.date()
});

FormSections defines multiple sections of the same form. This is used for triggering different interactive animations based on specific progress.

Using getValues() using array as an input returns an array back of the values, this is anticipated behavior.

//From the docs : https://react-hook-form.com/docs/useform/getvalues
const multipleValues = getValues(["test", "test1"]) // ["test-input", "test1-input"]

//From form.d.ts
<TFieldNames extends FieldPath<TFieldValues>[]>(names: readonly [...TFieldNames]): [...FieldPathValues<TFieldValues, TFieldNames>];

// From App.tsx
const personInfo = getValues(FormSections.personInfo);

where personInfo is typed as const personInfo: [string, number]

The problem for this use case is the fact that I cannot access the members of personInfo by the fieldNames, unlike getValues()
which returns field values

type FieldValues = {
    [x: string]: any;
}

so if I want to reconstruct the information I have to use array indexes, which feels weird

const personMap1 = {
  nameAndAge: personInfo[0] + personInfo[1]
};

---

Upon further digging, I was a little confused why this doesn't seem to already work based on

export type FieldPathValues<
  TFieldValues extends FieldValues,
  TPath extends FieldPath<TFieldValues>[] | readonly FieldPath<TFieldValues>[],
> = {} & {
  [K in keyof TPath]: FieldPathValue<
    TFieldValues,
    TPath[K] & FieldPath<TFieldValues>
  >;
};

And that's because K in keyof TPath returns a number ( if you used getValues, you will know that you will get an intellisense for length of the array numbers ), and the implementation of getValues indeed returns on array.

/// line 842
fieldNames.map((name) => get(values, name))

---

Suggested solution

If the fieldNames you provider are in the form of an array, maybe do something like

fieldNames.reduce((prev, name, i ) => { 
   let val = get(values, name) 
   return { ...prev, [name] : val }
}, {})

And change the type to something like

export type FieldPathValues<
  TFieldValues extends FieldValues,
  TPath extends FieldPath<TFieldValues>[] | readonly FieldPath<TFieldValues>[],
> = {} & {
  [K in TPath[number]]: FieldPathValue<
    TFieldValues,
    TPath[K] & FieldPath<TFieldValues>
  >;
};

So that you get type completion on getValues(array) and allow you to interact with return values more predictably

Links used

microsoft/TypeScript#20965

Code of Conduct

• I agree to follow this project's Code of Conduct