update the form data

[ghost]

Good afternoon

I'm kind of in doubt. I'm using remix.run , and I have a cam form with some inputs. When I change an input in a specific way, this input fetches an api and if it returns values, these values will fill the other inputs, how do I update the form data?

[edmundhung]

You can call form.update() with the value you get from the API like this:

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

[lou]

Is there a way to do this for multiple fields?
If I call form.update multiple times, only the last call is taken into account.

[edmundhung]

Sorry for the confusion! To call form.update multiple times, you need to wrap it inside a flushSync like this:

flushSync(() => {
  form.update({ name: fields.a.name, value: '' });
});
flushSync(() => {
  form.update({ name: fields.b.name, value: '' });
});

Since react batches the update by default. This makes sure each update is reflected on the dom immediately so that the next form.update is made based on the latest formData.

FYI, you can also update nested fields in a single form.update:

// Updating all address fields
form.update({ name: fields.address.name, value: { city: 'foo', street: 'bar' });
// Updating all form fields
form.update({ name: form.name, value: { title: '...', address: { city: '', street: '' } });

[kevinhpage]

Hi all. Can anyone tell me where form.update is documented? This post is the first place where I've found the proper arguments to the function.

[peperoli]

@kevinhpage this is what I found from https://conform.guide/intent-button#form-controls:

You can also modify a field with the reset and update intent.

import { useForm } from '@conform-to/react';


export default function Tasks() {
  const [form, fields] = useForm();

  return (
    <form id={form.id}>
      <button {...form.reset.getButtonProps()}>Reset form</button>
      <button
        {...form.reset.getButtonProps({
          name: fields.tasks.name,
        })}
      >
        Reset field (including nested / list field)
      </button>
      <button
        {...form.update.getButtonProps({
          name: fields.agenda.name,
          value: {
            title: 'My agenda',
            description: 'This is my agenda',
          },
        })}
      >
        Update field (including nested / list field)
      </button>
      <button
        {...form.update.getButtonProps({
          validated: false,
        })}
      >
        Clear all error
      </button>
    </form>
  );
}

Be aware that both intents requires setting up the inputs with the key from the field metadata. As Conform relies on the key to notify React for re-mounting the input with the updated initialValue. The only exception is if you are setting up a controlled input with the useInputControl hook which will reset the value when the key changes.