When you're creating forms and associating inputs with them by using the form attribute like so
<form id="form-1"></form>
<form id="form-2"></form>
<input type="text" name="form-1-name" form="form-1" />
<input type="text" name="form-2-name" form="form-2" />
... you need to get the form from the Context and set opts={form: form.id}. It would be nice if the input components set the form attribute if the form has an id such that the below could use the IdealFormsComponent. Would you consider a PR that added this? Or should I be asking the question on phoenix_html?
defmodule MyWeb.FormsComponent do
use Surface.Component
alias Surface.Components.Context
alias Surface.Components.Form.{Field, Label, TextInput}
def render(assigns) do
~F"""
<Context get={form: form}>
<Field name={:thing}>
<Label text="Thing" form={form} />
<TextInput form={form} opts={form: form.id} />
</Field>
</Context>
"""
end
end
defmodule MyWeb.FormsComponentNamedspaceContext do
use Surface.Component
alias Surface.Components.Context
alias Surface.Components.Form.{Field, Label, TextInput}
def render(assigns) do
~F"""
<Context get={Surface.Components.Form, form: form}>
<Field name={:thing}>
<Label text="Thing" />
<TextInput opts={form: form.id} />
</Field>
</Context>
"""
end
end
defmodule MyWeb.IdealFormsComponent do
use Surface.Component
alias Surface.Components.Context
alias Surface.Components.Form.{Field, Label, TextInput}
def render(assigns) do
~F"""
<Field name={:thing}>
<Label text="Thing" />
<TextInput />
</Field>
"""
end
end
defmodule MyWeb.FormsLive do
use MyWeb, :surface_live_view
alias MyWeb.FormsComponent
alias MyWeb.FormsComponentNamedspaceContext
alias Surface.Components.Context
@impl true
def mount(_params, _session, socket) do
{:ok,
assign(socket,
thing1: changeset(%{thing: "thing1"}),
thing2: changeset(%{thing: "thing2"})
)}
end
defp changeset(data \\ %{}, params) do
types = %{thing: :string}
Ecto.Changeset.cast({data, types}, params, Map.keys(types))
end
@impl true
def render(assigns) do
~F"""
<main>
{form1 =
form_for(@thing1, "#",
as: :thing1,
id: "thing1form",
phx_change: "change1",
autocomplete: "off"
)}
<#Raw></form></#Raw>
{form2 =
form_for(@thing2, "#",
as: :thing2,
id: "thing2form",
phx_change: "change2",
autocomplete: "off"
)}
<#Raw></form></#Raw>
{!--
<Context put={Surface.Components.Form, form: form1}>
<IdealFormsComponent />
</Context>
--}
<Context put={Surface.Components.Form, form: form1}>
<FormsComponentNamedspaceContext />
</Context>
<Context put={form: form2}>
<FormsComponent />
</Context>
</main>
"""
end
@impl true
def handle_event(event, params, socket) do
IO.inspect([event, params], label: "forms live")
{:noreply, socket}
end
end
When you're creating forms and associating inputs with them by using the
formattribute like so... you need to get the
formfrom theContextand setopts={form: form.id}. It would be nice if the input components set theformattribute if the form has anidsuch that the below could use theIdealFormsComponent. Would you consider a PR that added this? Or should I be asking the question onphoenix_html?