Maintain multiple forms state in the same Liveview

Questions / Help
,
1

When there are multiple forms in the same Liveview and each has it’s own validate and submit, it seems like change in one form overrides the change in the other one.
For example in the following code

<.form
  id="form_a"
  for={@form_a}
  phx-submit="save_form_a"
  phx-change="validate_form_a"
 >...</.form>

<.form
  id="form_b"
  for={@form_b}
  phx-submit="save_form_b"
  phx-change="validate_form_b"
 >...</.form>

def handle_event("validate_form_a", params, socket) do
end

def handle_event("validate_form_b", params, socket) do
end

when the user changes something in the first form, and then another thing in the other one (before submitting anything) and the validate_form_b event is triggered, the first form is reset to it’s initial value and any value applied by user is lost.

Am I missing something? Is there a special approach to sustain the state of both forms?

2

Are you propagating the changes received by validate_form_a back into @form_a inside that function?

The renderer wont clobber your input while its focused, so your probably just not noticing that the changes aren’t being “saved” for form_a.

When you edit form_b, you cause a re-render and the original form_a values are put back into the form for form_a.

Probably.

1 Like
3

A very good guess.
I thought I was propagating but the chain was so long that in some edge case I was loosing the change.
Thanks a lot :pray: