Version 7.35.0-next.0

[bluebill1049]

🎉 feature: new type FieldPathByValue field path by value generic implementation

function SomeCustomFormComponent<
  TFieldValues extends FieldValues,
  TPath extends FieldPathByValue<TFieldValues, Date>
>({
  control,
  name
}: {
  control: Control<TFieldValues>,
  name: TPath
}) {
  const { field } = useController({
    control,
    name,
  });
  // rest of components' rules
}

function ExampleOfUsage () {
  const {control} = useForm<{
      foo: Date;
      baz: string;
      bar: {
          baz: Date;
      }
  }>()

  return <>
      <SomeCustomFormComponent control={control} name="foo" /> {/* throw no error */}
      <SomeCustomFormComponent control={control} name="baz" /> {/*  throw an error since baz is string */}
   </>;
}

🐞 fix #8919 make useController fieldState properties enumerable

const { fieldState } = useController({ name: 'test' })
const copy = {...fieldState} ✅

👶🏻 close #8909 form context children prop type (#8910)

<FormProvider {...methods}>
  <div /> // ✅
  <div /> // ✅
</FormProvider>

🐌 allow field errors to escape type check when provided with any type

thanks to @carvalheiro, @chetvishal and @MicaelRodrigues

---

This discussion was created from the release Version 7.35.0-next.0.

[bryanprimus]

since we already assign the value passed must be Date in SomeCustomFormComponent.

That means SomeCustomFormComponent already knows that the value it receives must be Date right?

but when I check field.value

const { field, onChange } = useController({
  control,
  name,
});

const value = field.value

typeof value // this is not detected as date

onChange(4) // when I pass nondate, it still allowed

is there a way to detect that the value in SomeCustomFormComponent is a date?

[Svish]

Tested this out in my own code now:

// My old interface
interface StringListInputProps<
  TFieldValues extends FieldValues = FieldValues,
  TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
> {
  control: Control<TFieldValues>;
  name: TFieldName;
}

// My new interface, using FieldPathByValue
interface StringListInputProps<TFieldValues extends FieldValues = FieldValues> {
  control: Control<TFieldValues>;
  name: FieldPathByValue<TFieldValues, string[]>;
}

Like @bryantobing12 says, the value still ends up as any inside the component (the value returned from useController). So, the DX "inside" the component is still the same, with value being any, but great DX improvement "outside" the component, with auto-complete for name prop being restricted to fields of type (in this case) string[]). 🥳👍

[martin-wahlberg]

If anyone else lands on this while searching for a typesafe solution to work with generic form elements and form sections, I was able to get around the DX and typesafety issues by doing it this way:

export interface FormSectionComponent<
  ExpectedFieldValues extends FieldValues,
  AdditionalProps = unknown
> {
  <ProvidedFieldValues extends ExpectedFieldValues>(
    props: {
      form: ProvidedFieldValues extends ExpectedFieldValues
        ? UseFormReturn<ProvidedFieldValues>
        : never;
    } & AdditionalProps
  ): ReturnType<React.FC>;
}

const FormSection: FormSectionComponent<{ name1: string; name2: string }> = (
// The fields that is required for the component.
{
  form: { register },
}) => <input {...register('name1')} />;

I also made a form element component type

 type FieldValuesFromPath<
  PathString extends string,
  ValueType
> = PathString extends `${infer T}.${infer U}`
  ? { [Value in T]: FieldValuesFromPath<U, ValueType> }
  : { [V in PathString]: ValueType };

export interface FormElementComponent<ExpectedType, AdditionalProps = unknown> {
  <Key extends string, ProvidedFieldValues extends FieldValuesFromPath<Key, ExpectedType>>(
    props: {
      form: UseFormReturn<ProvidedFieldValues>;
      name: Key extends FieldPathByValue<ProvidedFieldValues, ExpectedType> ? Key : never;
    } & AdditionalProps
  ): ReturnType<React.FC>;
}

const FormElement: FormElementComponent<string> = ({ form: { control }, name }) => {
  const {
    // field.value will be of type string
    field,
  } = useController({ control, name });

  return <input {...field} />;
};

The only downside with the FormElementComponent is that it will not provide intelisense for the field names. But it will give you an error if you pass something that isn't a valid path for the provided form. (If anyone figures out a way to get both the correct type for field.value and intelisense i would appreciate if you let me know)

It can be used together like this:

const FormElement: FormElementComponent<string> = ({ form: { register }, name }) => {
  return <input {...register(name)} />;
};

// Dosen`t need to have all the same fields as the "parent" form
const FormSection: FormSectionComponent<{ name1: string; name2: number }> = ({ form }) => {
  return (
    <div>
      <FormElement form={form} name="name1" />
      {
        //Will have typeerror since name2 is of type number but FormElement expects string
        <FormElement form={form} name="name2" />
      }
      <input {...form.register('name2')} />
    </div>
  );
};

const MainForm: React.FC = () => {
  const form = useForm<{
    name1: string;
    name2: number;
    name3: string;
  }>();

  return <FormSection form={form} />;
};

I made a code sandbox if anyone wants to try it out.

https://codesandbox.io/s/typesafe-generic-hookform-w9w74n?file=/src/MainForm.tsx

[paulleonartcalvo]

Has there been any movement towards supporting the "value" of the field being known when using PathByValue? This seems like it would make a lot of generic form use cases much much simpler.

[xjamundx]

@paulleonartcalvo came here looking for the same thing :D