0

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

问题：

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

2 回答 2

0

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

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

似乎这也适用于任何动态表单（例如，在我的情况下，何时item1选择，item2设置项目，何时item2选择出现所需的附加字段item2）。

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

于 2021-05-14T14:11:45.077 回答
0

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

<%= 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在一个干净的函数中分配给套接字。

于 2021-05-11T17:46:43.197 回答