airjp73 / rvf

Easy form validation and state management for React and Remix
https://rvf-js.io
MIT License
840 stars 66 forks source link

[Feature]: Use a deep partial TS type for `defaultValues` prop #313

Closed Alex-Yakubovsky closed 1 year ago

Alex-Yakubovsky commented 1 year ago

What is the new or updated feature that you are suggesting?

For the nested object syntax it would be handy to seed only a subset of the fields. For example, consider a todo app where we want to pre-fill the first todo based off a previous interaction

<ValidatedForm validator={validator} defaultValues={{ todos: [{ task: "<prefilled value>" }] }}> // TS error, task is missing property `dueDate`
  <Input name="todos[0].task" />
  <Input name="todos[0].dueDate" />
</ValidatedForm>

Functionally, it looks like ValidatedForm already works like this. Just the Typescript type need to be updated. As a work around in my codebase, I've been re-exporting the ValidatedForm component with a DeepPartial type for the defaultValues prop.

import { FormProps, ValidatedForm } from "remix-validated-form";

type DeepPartial<T> = T extends object
  ? {
      [P in keyof T]?: DeepPartial<T[P]>;
    }
  : T;

export default ValidatedForm as <DataType, Subaction extends string | undefined>(
  props: Omit<FormProps<DataType, Subaction>, "defaultValues"> & {
    defaultValues?: DeepPartial<FormProps<DataType, Subaction>["defaultValues"]>;
  }
) => JSX.Element;

Why should this feature be included?

airjp73 commented 1 year ago

For some reason I thought I had already done this a long time ago haha. Would you mind creating a PR to update this?

Alex-Yakubovsky commented 1 year ago

Happy to, here's the PR: https://github.com/airjp73/remix-validated-form/pull/318