Elixir Phoenix 1.7.2：HEEx语法下登录表单如何使用for和as？

对应旧EEX代码的HEEx实现 #

<h1>Sign in</h1>
<.simple_form :let={f} for={:%{}} as: :session action={~p"/login"}>
  <.input field={f[:username]} type="text" label="Username" placeholder="username" />
  <.input field={f[:password]} type="password" label="Password" placeholder="password" />
  <:actions>
    <.button>Sign In</.button>
  </:actions>
</.simple_form>

关键参数说明 #

• for={:%{}}：替代旧代码中的@conn，表示这是一个不绑定任何Ecto模型的表单，和原表单的无模型提交逻辑完全一致。
• as: :session：直接在<.simple_form>标签上添加该选项，对应旧代码里的[as: :session]。提交表单后，前端参数会被自动嵌套在params["session"]下，比如你可以在控制器中通过params["session"]["username"]获取用户名，和旧代码的参数结构完全匹配。
• 字段修正：把你原来写的f[:name]改为f[:username]，和旧代码的:username字段名保持一致，确保参数传递正确。
• 占位符：添加了和旧代码一致的placeholder属性，保持UI体验不变。

额外注意 #

确保你的路由配置中，~p"/login"指向的是会话创建的动作（对应旧代码的session_path(@conn, :create)），比如在router.ex中应该有类似这样的配置：

post "/login", SessionController, :create
get "/login", SessionController, :new

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