Phoenix LiveView 动态选择标签中的表单问题答案

【问题标题】：Phoenix LiveView dynamic select tags in form troublesPhoenix LiveView 动态选择标签中的表单问题
【发布时间】：2021-05-14 22:11:45
【问题描述】：

在具有 3 个选择标签的 phoenix LiveView 表单中，第一个影响其他两个，即依赖的两个应该只显示第一个可用的选项，如下所示：

<%= 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>

当item1 被选中时，item2 和item3 选择标签确实包含正确的相应选项，但不显示选择的项目（因为它们不包含提示，所以应该选择第一个选项）。变更集不包括对item2 和item3 的更改（与显示的内容相匹配）。但是，在选择 item2 后，item3 将显示第一个选项（如预期的那样）。之后，变更集确实包含 item1 和 item2 更改，但 item3 选择的选项不存在。

问题：

如何让依赖选择标签（item2 和 item3）在更改为第一个选择（item1）后显示它们各自的第一个选项？
如何将依赖选择标签中的“默认”选项获取到变更集中？

【问题讨论】：

标签： elixir phoenix-live-view

【解决方案1】：

您是否尝试过为select 标签使用value 选项？像这样：

<%= 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))) %>

但是，我认为您应该在 LiveView 模块中执行此逻辑。如果您从表单中触发了 phx-change 事件，您实际上可以在 clean 函数中将 item2_values 分配给套接字。

【讨论】：

这仅在“视觉上”有效：该值显示在 select 中，但不包含在变更集中。根据LiveEEx pitfalls in the docs，在 LiveView 模块中执行逻辑似乎是可行的方法。但是，它不会改变功能。

【解决方案2】：

我用“两阶段变更集铸造”解决了这个问题。

在处理phx-change 事件时，首先对item1 属性进行强制转换和验证。接下来，item2 和 item3 属性会根据需要进行更改（即项目值和选定值）。最后，item2 和 item3 属性被强制转换和验证。

It seems that this also works for any dynamic forms (e.g. in my case when item1 is selected, items for item2 are set, when item2 is selected additional fields appear that are needed for the item2 )。

如果有更好的方法，我愿意接受建议。

【讨论】：