如何基于Phoenix LiveView的@form内容填充UI？

问题根源 #

• 未处理phx-change事件：表单修改后没有更新LiveView的socket状态，导致@form始终停留在初始值
• 模板依赖默认结构体：Context.current_struct()每次渲染都会返回新的默认实例，完全忽略用户的修改操作
• 错误访问Form数据：Phoenix Form是专用结构体，不能用@form[:some_bool]直接键值访问，必须用官方提供的方法

修复步骤 #

1. 完善LiveView的事件处理逻辑 #

实现handle_event来处理表单实时更新和提交动作，确保@form始终同步用户输入：

defmodule MyAppWeb.ViewLive do
  alias MyApp.MyStruct
  alias MyApp.Context
  use MyAppWeb, :live_view

  def mount(_params, _session, socket) do
    initial_struct = Context.current_struct()
    {:ok, assign(socket, form: to_form(Map.from_struct(initial_struct)))} 
  end

  # 表单实时变化时，更新socket中的form状态
  def handle_event("change_form", %{"my_struct" => params}, socket) do
    # 基于初始结构体合并用户输入，保留未修改字段的默认值
    updated_params = Map.merge(Map.from_struct(Context.current_struct()), params)
    form = to_form(updated_params)
    {:noreply, assign(socket, form: form)}
  end

  # 表单提交时，转换为MyStruct并处理业务逻辑
  def handle_event("submit_form", %{"my_struct" => params}, socket) do
    struct = struct(MyStruct, params)
    # 这里可以添加结构体的保存或后续处理逻辑，比如：
    # Context.save_struct(struct)
    {:noreply, put_flash(socket, :info, "表单已提交")}
  end
end

注：表单参数的键"my_struct"是to_form默认生成的前缀，对应结构体名的蛇形小写格式。

2. 修复模板的数据绑定与状态判断 #

移除模板中对Context.current_struct()的依赖，改用@form的实时数据：

<div class="container mx-auto my-4">
  <.form for={@form} phx-change="change_form" phx-submit="submit_form">
    <!-- Number picker -->
    <div class="mb-4">
      <.label>I want to pick a number here:</.label>
    </div>
    <div class="flex items-center space-x-4 mb-4">
      <%= for num <- [3, 7, 10] do %>
        <label class="cursor-pointer">
          <%= radio_button @form, :some_integer, num, class: "hidden" %>
          <span class={"px-4 py-2 rounded-md #{if Phoenix.HTML.Form.input_value(@form, :some_integer) == num, do: "bg-gray-400", else: "bg-gray-200"} hover:bg-gray-400"}>
            <%= num %> of something
          </span>
        </label>
      <% end %>
    </div>

    <!-- Checkbox -->
    <div class="mb-4">
      <.input
        label="I'd like this to be true or false:"
        type="checkbox"
        field={@form[:some_bool]}
      />
    </div>

    <.button>Submit</.button>
  </.form>
</div>

关键修改点：

• 用radio_button helper生成单选框，自动绑定@form的some_integer字段，无需手动编写name和checked属性
• 用Phoenix.HTML.Form.input_value(@form, :some_integer)获取实时选中值，用于样式判断
• 移除checkbox的value属性，field绑定后会自动处理选中状态

3. 正确访问Form字段的方法 #

无论在LiveView还是模板中，获取单个字段的值必须使用官方方法：

# LiveView中
input_value(socket.assigns.form, :some_bool)

# 模板中
<%= Phoenix.HTML.Form.input_value(@form, :some_bool) %>

禁止直接用@form[:some_bool]访问，Form结构体的内部结构不是普通键值对，直接访问会导致崩溃。

修复原理 #

• phx-change事件触发时实时更新socket中的form，确保模板渲染的是用户最新输入
• 所有状态判断依赖@form的实时数据，彻底脱离默认结构体的限制
• 使用Phoenix表单helper自动处理字段绑定，避免手动编写DOM属性的错误

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