Elixir Phoenix LiveView表单中的动态选择标记
在具有3个select标记的phoenix LiveView表单中,第一个标记会影响其他两个标记,即从属两个标记应仅显示第一个标记可用的选项,如下所示:Elixir Phoenix LiveView表单中的动态选择标记,elixir,phoenix-live-view,Elixir,Phoenix Live View,在具有3个select标记的phoenix LiveView表单中,第一个标记会影响其他两个标记,即从属两个标记应仅显示第一个标记可用的选项,如下所示: <%= f = form_for @changeset, "#", id: "eval-form", phx_target: @myself, phx_change: "validate", phx_submit: "save" %> <%=
<%= f = form_for @changeset, "#", id: "eval-form", phx_target: @myself, phx_change: "validate", phx_submit: "save" %>
<%= select(f, :item1_id, Enum.map(@item1s, fn {_,v} -> {v.name, v.id} end), prompt: "Choose item1...") %>
<% item1_id = @changeset |> Ecto.Changeset.get_field(:item1_id) %>
<%= select(f, :item2_id, item1_id && Enum.map(@item1s[item1_id].item2s, &{&1.name, &1.id}) || []) %>
<%= select(f, :item3_id, item1_id && Enum.map(@item1s[item1_id].item3s, &{&1.name, &1.id}) || []) %>
</form>
{v.name,v.id}end),提示:“选择项目1…”)%>
外部变更集获取字段(:item1\u id)%>
选择item1
时,item2
和item3
选择标记确实包含正确的相应选项,但不显示所选项目(因为它们不包含提示,所以应选择第一个选项)。变更集不包括项目2
和项目3
的变更(与显示内容匹配)。但是,在选择了item2
之后,item3
会按预期显示所选的第一个选项。在此之后,变更集确实包括item1
和item2
变更,但是item3
所选选项不存在
问题:
item2
和item3
),以显示在更改第一个选择(item1
)后选择的各自第一个选项您是否尝试过使用
选择标记的值选项?像这样:
<%= item2_values = item1_id && Enum.map(@item1s[item1_id].item2s, &{&1.name, &1.id}) || [] %>
<%= select(f, :item2_id, item2_values, value: @changeset |> Ecto.Changeset.get_field(:item2_id, List.first(item2_values))) %>
exto.Changeset.get_字段(:item2_id,List.first(item2_值)))%>
但是,我认为您应该在LiveView模块中执行此逻辑。如果您的表单中触发了phx change
事件,您实际上可以在clean函数中将item2\u值
分配给套接字。我解决了“两相转换集转换”的问题
处理phx change
事件时,首先转换并验证item1
属性。接下来,根据需要更改item2
和item3
属性(即项目值和所选值)。最后,item2
和item3
属性被转换和验证
这似乎也适用于任何动态表单(例如,在我的情况下,当选择item1
时,设置item2
的项目,当选择item2
时,显示item2
所需的其他字段)
如果有更好的方法,我愿意接受建议。这只会“直观地”起作用:值显示在select
中,但不包括在变更集中。如图所示,在LiveView模块中执行逻辑似乎是一条可行之路。但是,它不会改变功能。