Phoenix LiveView 动态 select 标签中的表单问题

Question

在带有 3 个 select 标签的 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 select 标签确实包含正确的各自选项，但不显示选择的项目（因为它们不包含提示，所以应该选择第一个选项）。 变更集不包括对item2和item3的更改（与显示的内容匹配）。 但是，在选择item2后， item3显示第一个选项（如预期的那样）。 之后，变更集确实包括item1和item2更改，但item3选择的选项不存在。

问题：

1. 如何获得从属 select 标签（ item2和item3 ）以显示在更改为第一个 select （ item1 ）后选择的各自的第一个选项？
2. 如何从依赖的 select 标记中获取“默认”选项到变更集中？

Answer 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事件，您实际上可以将item2_values分配给干净的 function 中的套接字。

Answer 2

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

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

It seems that this also works for any dynamic forms (eg 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 ).

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