如何为Heex的form_for生成的表单添加额外属性(如data-test)?
问题:给Phoenix的form_for生成的表单添加data-test属性
现有Heex模板代码:
<%= form_for @conn, Routes.contracts_path(@conn, :ar_check), fn f -> %> ... <% end %>
这段代码会生成如下HTML表单:
<form action="..." method="post"> ... </form>
想要修改后生成带有data-test属性的表单:
<form action="..." method="post" data-test="foo"> ... </form>
尝试直接在form_for所在行添加属性无法编译,放在<% end %>处虽能编译但无法运行。但在submit这类元素上添加类似属性(如下方代码)可以正常工作:
<%= submit "Check", class: "btn btn-success mb-3", "data-test": "check_button" %>
想问除了用<span data-test="foo">包裹表单外,还有其他解决方案吗?
解决方案
Phoenix的form_for函数支持在第三个参数位置传入HTML属性,只需把属性作为关键字列表或映射放在函数的第三个参数里即可,调整后的代码有两种写法:
写法一:使用下划线命名的关键字(Phoenix自动转换为连字符属性)
<%= form_for @conn, Routes.contracts_path(@conn, :ar_check), [data_test: "foo"], fn f -> %> ... <% end %>
写法二:使用字符串键的映射
<%= form_for @conn, Routes.contracts_path(@conn, :ar_check), %{"data-test" => "foo"}, fn f -> %> ... <% end %>
原理说明:form_for的函数签名为form_for(conn, action, opts \\ [], do_block),第三个参数opts是可选的选项列表,其中可以包含HTML属性。Phoenix会自动将下划线命名的键(如data_test)转换为连字符形式的属性名(data-test),这样就能正确生成带目标属性的表单标签了。
内容的提问来源于stack exchange,提问作者user3534080
相关产品推荐
相关产品推荐

