Programmatically Changing Values (like setValue or setFieldValue)

[aust1nz]

I'm interested in the most straightforward/streamlined methods to programmatically change a field's value using Conform.

Some examples of when you'd want to do this are when a user chooses an option from a drop-down, and then your application will pre-fill related fields, or populate hidden field values.

Similar functionality can be seen in the setValue function in react-hook-form, and setFieldValue in Formik.

Here's my best guess at how this would be done in Conform: https://stackblitz.com/edit/remix-run-remix-indwbm?file=app%2Froutes%2F_index.tsx In this example, you choose a restaurant and have the order type prepopulated for you based on what the restaurant prefers.

Is this performant/preferred? One issue I'm seeing is that if a form changes many fields programmatically, you wind up with a lot of useInputControl hooks.

[edmundhung]

The useInputControl or useControl hooks is designed for changes on a field level. If you wanna update a field on the form level, you can use the update intent instead. It works by utiltizing the key prop to remount the input with the initialValue updated.

[aust1nz]

I see, thanks!

Is there a way to run the updateIntent from an onChange handler for a select or text input rather than responding to button? Something like this:

<select
  {...getSelectProps(fields.restaurant)}
  onChange={(e) => {
    const selectedRestaurant = restaurants.find(
      (restaurant) => restaurant.id === e.currentTarget.value
    );
    if (selectedRestaurant) {
      const update = form.update.getButtonProps({
        name: fields.orderType.name,
        value: selectedRestaurant.preferredType,
      });
      // Can I get "update" to run from here?
    }
  }}
>

[edmundhung]

All form intents could be called directly, e.g.

form.update({ name: fields.something.name, value: 'hello!' })

[aust1nz]

Ah, that's great! Here's a version of the example using the form.update directly:

https://stackblitz.com/edit/remix-run-remix-mi13ac?file=app%2Froutes%2F_index.tsx

One note:

• form.update() only seems to work if the onValidate prop is sent to the useForm hook. With the bare useForm({}) hook, neither form.update or the corresponding intents seem to do anything.

I'd be happy to add an example of using form.update directly (and the onValidate note) to the docs, if you think it would be helpful.

[edmundhung]

Feel free to suggest and expand whatever you see missing from the docs! FYI, all intents are handled by the parser as well (e.g. parseWithZod). So you will either need to provide the onValidate option or provide the lastResult from the server (That's why they work without JS as well).