rails 杂记 - erb 中的 form_helper

原文

1. form_tag

1) 基础 Form

<%= form_tag do %>
  Form contents
<% end %>

生成 html

<form accept-charset="UTF-8" action="/" method="post">
  <input name="utf8" type="hidden" value="&#x2713;" />
  <input name="authenticity_token" type="hidden" value="J7CBxfHalt49OSHp27hblqK20c9PgwJ108nDHX/8Cts=" />
  Form contents
</form>

　　

2) 指定 url与 method

<%= form_tag("/search", method: "get") do %>
  <%= label_tag(:q, "Search for:") %>
  <%= text_field_tag(:q) %>
  <%= submit_tag("Search") %>
<% end %>

生成 html

<form accept-charset="UTF-8" action="/search" method="get">
  <input name="utf8" type="hidden" value="✓" />
  <label for="q">Search for:</label>
  <input id="q" name="q" type="text" />
  <input name="commit" type="submit" value="Search" />
</form>

 

3) 指定 controller 与 action

form_tag({controller: "people", action: "search"}, method: "get", class: "nifty_form")
# => '<form accept-charset="UTF-8" action="/people/search" method="get" class="nifty_form">'

　　

4）几个 tag

check_box_tag

<%= check_box_tag(:pet_dog) %>
<%= label_tag(:pet_dog, "I own a dog") %>
<%= check_box_tag(:pet_cat) %>
<%= label_tag(:pet_cat, "I own a cat") %>

=>

<input id="pet_dog" name="pet_dog" type="checkbox" value="1" />
<label for="pet_dog">I own a dog</label>
<input id="pet_cat" name="pet_cat" type="checkbox" value="1" />
<label for="pet_cat">I own a cat</label>

radio_button_tag

<%= radio_button_tag(:age, "child") %>
<%= label_tag(:age_child, "I am younger than 21") %>
<%= radio_button_tag(:age, "adult") %>
<%= label_tag(:age_adult, "I'm over 21") %>

=>

<input id="age_child" name="age" type="radio" value="child" />
<label for="age_child">I am younger than 21</label>
<input id="age_adult" name="age" type="radio" value="adult" />
<label for="age_adult">I'm over 21</label>

 

2. form_for

1）如果设置了 resources :articles

## Creating a new article
# long-style:
form_for(@article, url: articles_path)
# same thing, short-style (record identification gets used):
form_for(@article)
 
## Editing an existing article
# long-style:
form_for(@article, url: article_path(@article), html: {method: "patch"})
# short-style:
form_for(@article)

2）手动设置 action

<%= form_for @person, url: {action: "create"} do |person_form| %>
  <%= person_form.text_field :name %>
  <%= fields_for @person.contact_detail do |contact_detail_form| %>
    <%= contact_detail_form.text_field :phone_number %>
  <% end %>
<% end %>

生成 html

<form accept-charset="UTF-8" action="/people" class="new_person" id="new_person" method="post">
  <input id="person_name" name="person[name]" type="text" />
  <input id="contact_detail_phone_number" name="contact_detail[phone_number]" type="text" />
</form>

3）手动设置 action 与 class

controller

def new
  @article = Article.new
end

 app/views/articles/new.html.erb

<%= form_for @article, url: {action: "create"}, html: {class: "nifty_form"} do |f| %>
  <%= f.text_field :title %>
  <%= f.text_area :body, size: "60x12" %>
  <%= f.submit "Create" %>
<% end %>

生成 html

<form accept-charset="UTF-8" action="/articles" method="post" class="nifty_form">
  <input id="article_title" name="article[title]" type="text" />
  <textarea id="article_body" name="article[body]" cols="60" rows="12"></textarea>
  <input name="commit" type="submit" value="Create" />
</form>

4）限定命名空间

form_for [:admin, @article]

 表格将提交到 在 admin 空间下的  ArticlesController (比如对于 update 方法提交到 admin_article_path(@article) ). 

 

3. form_with

参考：https://m.patrikonrails.com/rails-5-1s-form-with-vs-old-form-helpers-3a5f72a8c78a

1）无 model

<%= form_with url: users_path do |form| %>
  <%= form.text_field :email %>
  <%= form.submit %>
<% end %>

2）有 model

<%= form_with model: @user do |form| %>
  <%= form.text_field :email %>
  <%= form.submit %>
<% end %>

3）取消自动 ids与 class，需要手动指定

<%= form_with model: @user do |form| %>
  <%= form.text_field :name %>
  <%= form.text_field :email, id: :email, class: :email %>
<% end %>

生成 html

<form action="/users" ...>
  ...
  <input type="text" name="user[name]" />
  <input id="email" class="email" type="text" name="user[email]" />  </form>

设定 label

<%= form_with model: @user do |form| %>
  <%= form.label :name %>
  <%= form.text_field :name, id: :user_name %>
<% end %>

注意 rails 5.2 自动生成 ids

4）form id 与 class 不再包裹在 {}中

之前

<%= form_for @user, html: { id: :custom_id, class: :custom_class } do |form| %>
<% end %>

现在

<%= form_with model: @user, id: :custom_id, class: :custom_class do |form| %>
<% end %>

　　

5）form_field 适应 model属性

<%= form_with model: @user, local: true do |form| %>
  <%= form.text_field :email %>
  <%= form.check_box :send_welcome_email %>
  <%= form.submit %>
<% end %>

这样就会在 user作用域中添加该参数，如果不想这么做，建议使用  check_box_tag 代替 form.check_box 

params[:user][:send_welcome_email]

　

6）form_with 默认使用 ajax 提交（默认设置  remote: true）

如果不需要 ajax远程提交，必须指定 local:true

<%= form_with model: @user, local: true %>
<% end %>

　　

而不指定 local:true，会生成 （优点是不刷新页面，缺点是无法显示 error信息）

<form action="/users" data-remote="true" method="post">
  ...
</form>

该类属性由 rails-ujs 处理， rails-ujs 的其他处理技巧，参见 https://m.patrikonrails.com/a-definitive-guide-to-railss-unobtrusive-javascript-adapter-ef13bd047fff。

如何对 ajax提交做响应参考文档 http://guides.rubyonrails.org/working_with_javascript_in_rails.html

如上！