Phoenix/LiveView多选复选框表单参数重复及URL更新异常求助

问题根源 #

取消复选框时，URL仍保留已取消选项的核心原因是：表单提交的参数未正确反映当前DOM的复选框状态，且存在重复值，导致Enum.uniq()无法移除已取消的选项（提交数组中仍包含该值）。

解决方案 #

1. 依赖Changeset处理表单参数，确保数据正确性

在handle_event中，通过当前表单的Changeset处理提交参数，而非直接操作原始提交数据，利用Changeset的参数校验能力保证数据准确性：

def handle_event("apply_filters", %{"search_form" => search_form}, socket) do
  # 基于当前表单数据创建新的changeset，自动处理参数
  current_data = socket.assigns.search_form.data
  new_changeset = SearchForm.changeset(current_data, search_form)

  # 从changeset中提取清洗后的参数
  query = new_changeset.data.query
  platforms = new_changeset.data.platforms

  # 格式化URL参数：空值不加入URL
  formatted_params =
    %{
      "query" => query || "",
      "platforms" => if Enum.empty?(platforms), do: "", else: Enum.join(platforms, ",")
    }
    |> Enum.reject(fn {_key, value} -> value == "" end)
    |> Map.new()

  {:noreply, push_patch(socket, to: ~p"/search?#{formatted_params}")}
end

2. 在Changeset中添加数组去重逻辑

修改SearchForm的changeset，自动对platforms数组去重，从源头避免重复值：

defmodule YourApp.SearchForm do
  use Ecto.Schema
  import Ecto.Changeset

  schema "search_forms" do
    field :query, :string
    field :platforms, {:array, :string}
  end

  def changeset(search_form, attrs) do
    search_form
    |> cast(attrs, [:query, :platforms])
    |> validate_length(:query, max: 100)
    # 对platforms数组去重，确保无重复选项
    |> update_change(:platforms, fn platforms ->
      platforms |> List.wrap() |> Enum.uniq()
    end)
  end
end

3. 使用phx-change自动同步表单状态

将表单事件绑定改为phx-change，确保复选框状态变化时，LiveView自动收集当前DOM的正确数据，避免手动提交的时序问题：

<form phx-change="apply_filters" class="...">
  <!-- 搜索输入框 -->
  <div class="...">
    <%= text_input @search_form, :query, class: "..." %>
  </div>

  <!-- 多选复选框组件 -->
  <.multi_select form={@search_form} field={@search_form[:platforms]} options={@platform_options} />
</form>

4. 优化MultiSelect组件的复选框生成

使用Phoenix表单助手生成复选框，确保属性正确，避免手动构建可能导致的状态跟踪异常：

defp multi_select(assigns) do
  ~H"""
  <div class="...">
    <%= for option <- @options do %>
      <%= label @form, @field.field, class: "..." do %>
        <%= checkbox @form, @field.field,
          name: "#{input_name(@form, @field.field)}[]",
          value: option,
          checked: option in @field.value,
          class: "..."
        %>
        <span class="..."><%= option %></span>
      <% end %>
    <% end %>
  </div>
  """
end

验证效果 #

修改后，取消复选框时：

1. phx-change触发，LiveView收集当前所有勾选的复选框值，提交的platforms数组不再包含已取消的选项
2. Changeset自动去重，确保数组无重复值
3. handle_event基于Changeset的正确数据生成URL参数，URL会正确移除已取消的选项

内容的提问来源于stack exchange，提问作者Wannabe