如何让Phoenix LiveView表单绑定中的复选框正常工作？

我有一个LiveView页面，里面包含一个小型表单，需要一组单选按钮和一组复选框，尝试用Phoenix LiveView的Form Bindings来实现。

表单用于让用户选择通知接收方式（邮件/短信，互斥）和通知主题（多选）。当前的html.heex和LiveView代码如下：

<.form for={@form} phx-submit="save">
   <.input id="email" name="notifications" type="radio" value="email" field={@form[:notifications]} />
   <.input id="sms" name="notifications" type="radio" value="sms" field={@form[:notifications]} />

  <.input id="sports" name="topics" type="checkbox" value="sports" field={@form[:topics]} />
  <.input id="science" name="topics" type="checkbox" value="science" field={@form[:topics]} />

  <button>Save</button>
</.form>

defmodule MyApp.Settings do
  use MyApp, :live_view

  @impl true
  def mount(_params, _session, socket) do
    form = to_form(%{})
    updated_socket = assign(socket, form: form)

    {:ok, updated_socket}
  end

  def handle_event(event, params, socket) do
    Logger.info("Event: #{inspect(event)} ; #{inspect(params)}")
    {:noreply, socket}
  end
end

单选按钮组notifications能返回正确值，但复选框topics始终返回true或false，预期应该是选中值的列表，比如["sports", "science"]。查阅文档没找到复选框相关的说明，也不理解为什么需要schema，毕竟to_form配合%{}看起来能正常工作。

• 如何让复选框返回选中值列表而非布尔值？
• 不使用schema时，to_form能否配合结构体使用？
• 向to_form传递结构体有何益处？

1. 让复选框返回选中值列表的方法 #

要实现复选框返回选中值列表，需要做两处修改：

• 给复选框的name属性加上[]后缀，告诉LiveView要收集多个值：

  <.input id="sports" name="topics[]" type="checkbox" value="sports" field={@form[:topics]} />
  <.input id="science" name="topics[]" type="checkbox" value="science" field={@form[:topics]} />
  

• 初始化表单时，给:topics字段设置默认空列表，确保LiveView能正确识别这是一个集合类型：

  def mount(_params, _session, socket) do
    form = to_form(%{topics: []})
    updated_socket = assign(socket, form: form)
  
    {:ok, updated_socket}
  end
  

修改后提交表单，params里的"topics"就会是选中值的列表。

2. 不使用schema时，to_form可以配合结构体使用 #

完全可以。你可以定义一个简单的结构体来替代map，比如：

defmodule NotificationSettings do
  defstruct [:notifications, topics: []]
end

然后在mount里初始化表单：

form = to_form(%NotificationSettings{})

这种方式和使用map的效果一致，表单绑定依然能正常工作。

3. 传递结构体给to_form的益处 #

• 默认值管理：结构体可以预先定义字段默认值，比如topics: []，不用每次初始化都手动设置，避免遗漏。
• 提升代码可读性：结构体明确了表单的字段结构，其他开发者能快速理解表单需要处理哪些数据。
• 扩展性强：后续如果需要添加验证、字段转换等逻辑，可以很方便地在结构体模块中扩展，比如结合Ecto.Schema做表单验证（即使不关联数据库）。
• 保证数据一致性：大型项目中使用结构体，能避免不同地方初始化表单时出现字段名拼写错误或默认值不一致的问题，保持数据结构统一。

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