Why does LV not protect the value prop of an input element

I have this assign:

user_form: to_form(%{"username" => "Kermit", "email" => "kermit@frog.com"})

which I use like this:

<.form for={@user_form} phx-submit="save">
    style={"border-width: #{rem(@ticker, 2) + 1}px; border-color: red;"}
  <.input type="text" field={@user_form[:email]} />

So everytime I inc the @ticker assign, the input is updated (because style changes)

What happens is:
The value property is reset to the initial value of the value attribute.
Is this expected? Or am I doing sth wrong with the forms (most of the docs expect us to use changesets, but I use a simple map here, so maybe there is some magic going on with changesets that I do not understand…)

That makes sense to me since the input is being “controlled” (in React terms) by the form and it’s just re-rendering back to the server state. This would happen with changesets too unless you have a phx-change on the form—often there is a phx-change="validate" which creates a new changeset with the current form state. I’ve never not used changesets so I’m not sure if there is a sanctioned way with bare maps but you would just need to merge initial and current state and call to_form again on phx-change.

1 Like