How can I programmatically change the value of a field?

[MoSattler]

Hi!

I have a button, that when clicked, it would change / prefill certain inputs.
Is there a way to change the form values programatically like that?

[edmundhung]

Hi @MoSattler, there are 2 approaches you can try:

// Approach 1 - Controlled input
const [value, setValue] = useState();

// Just set the state on button click
<input value={value} onChange={event => setValue(event.target.value)} />
<button type="button" onClick={() => setValue('something')}>Action</button>


// Approach 2 - Update the input value with useInputEvent
// This will also emit a change / input event and trigger validation based on your form's configuration.
const [ref, control] = useInputEvent();

<input ref={ref} />
<button type="button" onClick={() => control.change('something')}>Action</button>

[MoSattler]

Hey @edmundhung - I previously tried approach 1, but I couldn't get it to work without interfering with conform's default values.

I will checkout the useInputEvent hook, thank you!

[anderson-chong]

Hi @edmundhung I was quite confused the real usage of useInputEvent hook, and I have some unanswered questions:

1. Why use useInputEvent if I could just use useState to update the hidden input?
2. When and why to use each control method? E.g. control.change(), control.focus() and control.blur(). Because I noticed in your examples, not all control methods are used in all integrated components.
3. What's the differences of the onFocus handler in useInputEvent and the onFocus property in the referenced input?

[cjoecker]

@edmundhung, a common use case is to populate many fields with a call to action. For example, calculate something with the current fields to fill other fields automatically. With your suggestions, it is not possible to set values outside the field components.

Therefore, it would be nice to have something like this:

form.setValues({
	field1: "foo",
	feld2: "bar"
})

To have something like this is not a comfortable option since we would need one hook per field:

const {setValue1} = useField("field1")
const {setValue2} = useField("field2")

I just find out that this is updating the form values but not the input values, so this is not working:

const form = useFormMetadata("formId");
form.update({ value: { myInputName: "newValue" } });

As a workaround, I'm using a global store with Zustand to save all the controlled input values and then modify them globally. But I consider that option not so elegant.

[updbqn]

Edit: See https://codesandbox.io/p/devbox/wonderful-leakey-9zyn6v for a working example using form.update({ name: fields.items.name, value: [{ description: "Test", quantity: 1, rate: 1 }], });

[mbisurgisoshace]

Cool thanks!! Yep that is a good idea!

[updbqn]

@mbisurgisoshace Looks like I was in a bit of a hurry previously. See my updated comment.

[mbisurgisoshace]

Thanks! now this worked! the key thing is that getInputProps. This should be either better documented or maybe change into a more easy or more how users might expected to be

[updbqn]

Agreed. I think the maintainers are focusing on v2. Documentation and DX are a bit lacking at the moment.

I believe the minimum needed to get it to work is:

<input
  name={fields.field.name}
  key={fields.field.key}
  defaultValue={fields.field.value}
/>

Conform needs to re-mount the input with a new default value.