Greetings Everyone!!!
I am trying to display a form inside another form depending on the value of a field in the outer form.
If an item’s type is “I”, no other form is needed, this is just an Item.
If the item’s type is “C”, I need to show a form to add several items to this “Container”.
If the item’s type is “L”, I need to show a form to link a single item.
I already set the self-reference many to many association, but I am having problems to show the inner forms.
I actually have no idea whatsoever on how to do this, but just for starting the process, I have this code when rendering the page.
# item_live/form_component.ex
<.simple_form
for={@form}
id="item-form"
phx-target={@myself}
phx-change="validate"
phx-submit="save"
>
...
<.input field={@form[:itm_descrip]} type="text" label="Description" />
<.input field={@form[:itm_type]} type="select" label="Type"
options={@item_types} prompt="Choose a type:" />
# First attempt =======================
<div>
<p><%= {inspect(@item_types)} %></p>
</div>
<div :if={@form[:itm_type] == "C"}>
<p>Container</p>
</div>
<div :if={@form[:itm_type] == "L"}>
<p>Link</p>
</div>
# ========================================
<.input field={@form[:itm_cost]} type="number" label="Cost" step="any" />
Using the examples at Components and HEEx — Phoenix v1.7.18, I tried using both formats from the mentioned page, and also with the case
statement.
<%= if @some_condition do %>
<div>...</div>
<% end %>
<div :if={@some_condition}>...</div>
I also checked the format to display a variable is right…
<%= if some_condition? do %>
<p>Some condition is true for user: {@username}</p> # <------------
<% else %>
<p>Some condition is false for user: {@username}</p>
<% end %>
… but I always got (I cut out a lot of fields not related and tried to split the line in a logic way):
[error] ** (Protocol.UndefinedError) protocol Phoenix.HTML.Safe not implemented for
{"
%Phoenix.HTML.FormField{
------> id: \"item_itm_type\",
------> name: \"item[itm_type]\",
errors: [],
field: :itm_type,
form: %Phoenix.HTML.Form{
source: #Ecto.Changeset<
action: nil,
changes: %{},
errors: [
...
-----------> itm_type: {\"can't be blank\", [validation: :required]},
itm_cost: {\"can't be blank\", [validation: :required]},
...
],
data: #Menu.Catalogs.Item<>,
valid?: false,
...>,
impl: Phoenix.HTML.FormData.Ecto.Changeset,
id: \"item\",
name: \"item\",
data: %Menu.Catalogs.Item{
__meta__: #Ecto.Schema.Metadata<:built, :general, \"items\">,
id: nil,
...
itm_cost: nil,
...
-----------> itm_type: nil,
...
categories: #Ecto.Association.NotLoaded<association :categories is not loaded>,
items_relations: #Ecto.Association.NotLoaded<association :items_relations is not loaded>,
reverse_relations: #Ecto.Association.NotLoaded<association :reverse_relations is not loaded>,
action: nil,
hidden: [],
params: %{},
errors: [],
options: [method: \"post\"],
index: nil
},
value: nil
}
"} of type Tuple. This protocol is implemented for the following type(s): Atom,
BitString,
...
URI
And that’s all I have tried for this. I hope you could help me out to sort this issue.
Thanks in advance and best regards,
Greg.