form內 有 model實體時，用form_for，主要用於新增或修改。

form內 無 model實體時，用form_tag，主要用於登入一筆資料。

Rails 5.1後，將兩者結合為form_with

上次提到了form_tag及form_for，在Rails 5.1之後結合為form_with，代表form_with結合了兩種form的特性，不論有無Model都可以使用。

使用form_with製作表格

製作對象有Model時：

#products_controller.rb
#@product = Product.new

<%= form_with model: @product do |form| %>
  <%= form.text_field :title %>
  <%= form.submit %>
<% end %>

產出的html:

<form action="/products" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="authenticity_token" value="zzGYG0KNdBU0pPfzO7QDBAWUkDcPE9czey2zv21TwaXXf5T01neGV4Hp2YwZJRUJ2doDyOrnm9ZH74Ql6Ky9Mg==">
  <input type="text" name="product[title]" id="product_title">
  <input type="submit" name="commit" value="Create Product" data-disable-with="Create Product">
</form>

製作對象沒有Model時：

<%= form_with url: new_product_path do |form| %>
  <%= form.text_field :title %>
  <%= form.submit %>
<% end %>

產出的html

 <form action="/products/new" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="authenticity_token" value="ZlLlHMOezGqsuZrFgovtKbph3uYPFcZuZbHyi1V6YEJ+HOnzV2Q+KBn0tLqgGvskZi9NGerhiotZc8UR0IUc1Q==">
  <input type="text" name="title" id="title">
  <input type="submit" name="commit" value="Save " data-disable-with="Save ">
</form>

兩種方式產出的東西幾乎是相同的，因此可以得知我們只要根據專案的情況(有無Model)去設計form_with表單就好。

data-remote="true"

 <form action="/products/new" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" 
 
 ....
 
 </form>

上面兩個例子產出的html中，有一段data-remote="true"是在form_tag及form_for沒有的。

有了這個屬性之後，表單會透過 Ajax 的方式提交，而不是瀏覽器平常的提交機制，若要設定不讓Ajax的方式提交，則要另訂 local: true。

#products_controller.rb
#@product = Product.new

<%= form_with model: @product, local: true do |form| %>
  <%= form.text_field :title %>
  <%= form.submit %>
<% end %>

form_with就算沒有Model的屬性也使用

form_for

#products_controller.rb
#@product = Product.new

<%= form_for @product do |form| %>
  <%= form.text_field :title %>
  <%= form.check_box :is_avalble %>
  <%= form.submit %>
<% end %>

form_with

#products_controller.rb
#@product = Product.new

<%= form_with model: @product, local: true do |form| %>
  <%= form.text_field :title %>
  <%= form.check_box :is_avalble %>
  <%= form.submit %>
<% end %>

產出的html:

可以看得出來，就算Product這個Model裡沒有is_avaliable的屬性，還是可以用form_with寫出統一性的指令，而這個資料可用prodcut[is_avalible]收集。

form_with在設定html時不用花括號{}

form_for或for_tag若要設定html屬性，：

<%= form_for @product, html: { id: “product-id”, class: “product-type } do |form| %>

form_with則不需要再寫花括號：

<%= form_for @product, id: “product-id”, class: “product-type  do |form| %>

以上大概就是淺談form_with，其實form_with有很多的細節可以討論，請原諒小弟我僅提出最基本部分來討論...

參考資料：

form_with — Building HTML forms in Rails 5.1
ActionView::Helpers::FormHelper

“There’s no great loss without some small gain.”

– Laura Ingalls Wilder, Novelist

本文同步發佈於： https://louiswuyj.tw/