I want to use react hook forms defaultValues property like its described here: https://react-hook-form.com/api/useform/

If the default values are defined this way the dirty field status works even better: If the user changes a fields value from the default value to a new value and then back to the default value, the form is not dirty anymore. Without the defaultValues it would be still dirty.

This pr also helps to provide default values easier than via zod schema. <Form schema={schema} method="patch" defaultValues={{email: '[email protected]', firstName: 'Mary'}}>

Since we are using react-hook-form. It would be nice to have access to stuff like isSubmitting from the form children without having to pass it down the three.

Right now, the form is controlling the label of the button to indicate the form is submiting but if you are working with UI libs like Chakra, you might want to use somethnig like <Button isLoading />

Can someone point me to how can custom styles be applied? I'm using Tailwind.

I'm extending the form as per docs but I can't figure out how to add the className to the element

 multilineComponent={"select"} /* your custom Multiline */

Thank you!

This hook can be used in any of the custom components, allowing those to change styling/behavior etc depending on the field's state. This is mostly useful for things like the required/error/dirty indicators (e.g. https://remix-forms.seasoned.cc/examples/render-field/required-indicator) which currently require the use of the renderField prop. See also #124.

Using the prop makes things quite verbose because the structure of each field will have to be replicated, even if just a single component needs to be customized. Since the default structure is not the same for all field types, customizing components in this way requires some gnarly copy and paste from the package's source code (see https://remix-forms.seasoned.cc/examples/render-field/inline-checkboxes).

For now, the PR only contains the code required to make useField work. If the maintainers agree with this approach, I'll add some examples to the docs as well (perhaps even replacing the current renderField section?), and tests where applicable.

Description

This PR adds an example to illustrate how to use multiple forms on the same route with the same action.

Notes

I could not figure out how to make it so only the button on the submitted form goes into a pending state - if anyone has feedback or suggestions on this I'll happily update! 🙏

Source

https://twitter.com/seasonedcc/status/1589730417330225153?s=20&t=dN-tDjj0_13Jlv2KkDZDaA

As @tavoyne pointed out on #62 , lodash is taking up to 48% of remix-forms' package size (over 67kb 😱).

I started playing with this PR by using the

import startCase from 'lodash/startCase'

syntax so it would already reduce the bundle size but ended up completely replacing lodash's startCase with a custom (yet well tested) version of startCase and replacing concat with the native ES6's array spread.

This way we'll have only 2 dependencies if this PR is merged: react-hook-form and @hookform/resolvers.

I am trying to make a checkbox required to be true within the zod schema, but the form is still submitting no matter what I have tried so far. There is an example that shows this on the website, but it just sets the default to false. It has a required indicator, but accepts either true or false.

Is there a way to do this currently?

I think we could improve the DX a bit just by exporting the registered input already as a prop.

Currently if we want to make a custom input we need to do this:

<Field name="email">
  {({ Label, Errors }) => (
    <>
      <Label />
      <input
        type="email"
        {...register('email')}
        className="border-2 border-dashed rounded-md"
      />
      <Errors />
    </>
  )}
</Field>

Since the Field has the name it would make sense to just do this

<Field name="email">
  {({ Label, Errors, props }) => (
    <>
      <Label />
      <input type="email"  {...props}  className="border-2 border-dashed rounded-md" />
      <Errors />
    </>
  )}
</Field>

If you visit the Custom Response example, then click on the Redirect example, and submit the form, you will be redirected to the /success page

However, if you then click the "Back" button in your browser, you are taken to the Custom Response example (instead of the Redirect example)

Hi,

What would be the recommended way to return a boolean value out of the checkbox type input field? At the moment it returns "on" | "off"

Thanks a lot!

Is there any way to reset form after submitted?

I tried following way but no luck :(

export default function AccountsIndexPage() {
  const data = useLoaderData<LoaderData>();
  let transition =  useTransition();
  let isAdding = transition.state === "submitting";
  let formRef = useRef<HTMLFormElement>(null);
  useEffect(() => {
    if(!isAdding)  {
      formRef.current?.reset();
    }
  }, [isAdding]);
  return (
    <Panel>
      
      <DataTable>
      
        <Form schema={schema} ref={formRef} className="valid-form flex flex-wrap flex-row -mx-4 mb-6" id="account-form">
          {({ Field, Errors, Button, register }) => (

          ....

In my console I get following errors:

react-dom.development.js:86 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `AccountsIndexPage`.
    at Form3
    at div
    at div
    at div
    at div
    at div
    at div
    at DataTable (http://localhost:5000/build/_shared/chunk-6HY25IE3.js:878:22)
    at div
    at Panel (http://localhost:5000/build/_shared/chunk-6HY25IE3.js:847:18)
    at AccountsIndexPage (http://localhost:5000/build/routes/dashboard/organization/accounts/index-2NPI7QXN.js:56:16)
    at RemixRoute (http://localhost:5000/build/_shared/chunk-3WT6HRTL.js:2552:3)
    at Outlet (http://localhost:5000/build/_shared/chunk-3WT6HRTL.js:675:26)

Is there any option to automatically reset form after submitted ?

Let's say we're updating a user at /users/$userId/edit:

const formSchema = z.object({
  firstName: z.string().min(1),
  email: z.string().min(1).email(),
})

const mutationSchema = formSchema.extend({ userId: z.string() })

const mutation = makeDomainFunction(mutationSchema)(async (values) => values)

export const action: ActionFunction = async ({ request, params }) =>
  formAction({
    request,
    schema,
    mutation,
    transformValues: (values) => ({ ...params, ...values }),
  })

export default () => <Form schema={formSchema} />

If for any reason the userId is not present in the params, the mutation will not succeed but formAction will not return an error for the missing userId.

It would be nice if we could show them as global errors and give feedback to the developer that something is off with the wiring between Form and action. Right now, the form submission will not succeed but no error will be shown.

I'm looking for a generic way to implement this as a convention in Remix Forms: whenever we have an inputError for a field that's not part of the form schema, we make it a global error.

Whenever we return the formAction in an action:

export async function action({ request }: ActionArgs) {
  return formAction( // ...)
}

export default function() {
  const actionData = useActionData<typeof action>()
  //         ^? any
}

The useActionData loses the inference - it will be inferred as any.

It'd be cool that it would infer the TypedResponse for us. The inferred type should probably be a union of:

{ errors: FormErrors<SchemaType>, values: FormValues<SchemaType> } | UnpackData<typeof mutation>

Things to consider:

• If we use a custom json in createFormAction we should be using the return of that given function
• If we set a successPath in the formAction the return type of the mutation should not be considered:

{ errors: FormErrors<SchemaType>, values: FormValues<SchemaType> }

The render function would receive the same arguments as children + Form (which would be the value of component prop passed either to the form or to createForm) + fetcher (which would be the value of the fetcher prop).

It would be called whenever there are no children passed to the form, just like renderField is called when there are no children passed to Field.

That would allow us to customize the default markup of the forms, including custom pending UI like the one described in #37.

When using the field children, you can pass some props to the Label/Input etc. However, the prop types of the components are JSX.IntrinsicElements['input'] for example, so if you have a custom input component that takes a size prop, you end up with a typescript error.

In reality the props are being passed through, so it will work if you ignore the type error, but it would be nice if the prop types could be merged somehow.

This component would:

• Render all fields in the schema precisely as if we hadn't passed children to the form. This is useful because sometimes we just want to customize the errors, the button, or the overall form layout. But not the fields. In this situation, we're currently forced to render all fields manually.
• If we pass children to it, we only pass the Fields we want to customize, but it will render all form fields in the same order as the schema. This will allow us to customize only the fields we want and rely on the convention for the rest.

This should not change the current Form children render logic. It will only add this option to make our forms even DRYer.