Question: Form example on latest version

[wwall3r]

Hi. I did not see a discord or other place to ask questions or discuss, so I'm assuming this is the correct location. Please let me know if you all would rather do this elsewhere.

I'm new-ish to Phoenix and I really like the abstractions and features that Surface offers. As an exercise to ensure I grok enough of it to finish up a small project (which is mostly CRUD-y), I am attempting to convert the UserRegistrationLive component generated by Phoenix to Surface (partially because it is small and already has tests).

If I figure this out, I'm also happy to add a quick example or blog post somewhere detailing it.

The original Phoenix implementation appears to convert the Changeset into a form structure, and then pass the form to <.simple_form>. However, from what I can gather, <Form> in Surface expects Changeset more directly in its for attribute. I attempted to change assign_form to this:

defp assign_form(socket, %Ecto.Changeset{} = changeset) do
  if changeset.valid? do
    assign(socket, changeset: changeset, check_errors: false)
  else
    assign(socket, changeset: changeset)
  end
end

and then use it in the render function like so:

<Form 
  id="registration_form"
  for={@changeset} 
  change="validate" 
  submit="save" 
  method="post" 
  action={~p"/users/log_in?_action=registered"}
>
  <Field name={:email}>
    <Label/>
    <EmailInput opts={required: true} value={@changeset.data.email}/>
  </Field>
  <!-- similar for password -->
</Form>

And that seemed to be working without raising any errors but the behavior is wrong because it clears the other fields when you change one.

Any help with this would be greatly appreciated. Thanks!

Environment

surface ~> 0.11.2
phoenix_live_view ~> 0.20.1
phoenix ~> 1.7.10
elixir 1.15.7-otp-26
erlang 26.1.2

[Simon McConnell]

FYI there is a #surface channel on the elixir slack.

[Tiago Moraes]

Hello @wwall3r, Form and all related components are outdated and soft deprecated. We're working on extracting it to a separate package and recommend using LiveView's built-in ones.

In your case you can also convert <.simple_form> to Surface, either as a function or Module component.

Thank you for the report and fell free to join #surface channel in Elixir Slack.