rails 杂记 - erb 中的 form

原文

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="✓" /><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

如上！

转载于:https://www.cnblogs.com/lemos/p/8492623.html