[ruby on rails]form表单使用

form_tag articles_path; form_for @article ; form_with model: @article

form_with

• Rails 5.1 之后，form_with取代了form_for和form_tag。

有Model 的话

<%= form_with model: Message.new do  |form| %> 
  <%= form.text_field :username %> 
<% end %>

产生如下：

<form action="/messages" method="post" data-remote="true"> 
  <input type="text" name="message[username]"> 
</form>

指定URL 时：

<%= form_with url: messages_path do  |form| %> 
<%= form.text_field :username %> 
<% end %>

产生如下：

<form action= "/messages" method= "post" data-remote= "true" > 
<input type= "text" name= "username" > 
< /form>

可用scope 添加前缀：

<%= form_with scope:  :post , url: posts_path do  |form| %> 
<%= form.text_field :username %> 
<% end %>

产生如下：

<form action= "/posts" method= "post" data-remote= "true" > 
<input type= "text" name= "post[username]" > 
< /form>

• form_with还有三个特色：

id、class、data 的属性免花括号 form_tag、form_for使用HTML 的id、class、data 属性时，需使用{ } 包起来：

<%= form_for @user, html: { id:  "custom-id" , class : " custom - class " } do | form | %>

form_with写法：

<%= form_with model: @user, id:  "custom-id" , class : " custom - class " do | form | %>

• 自动生成id、calss 在Rails 5.1 版本的form_with不会自动产生id、class，需由开发者自行指定；Rails 5.2 之后，则改回和form_tag、form_for一样，自动附加id、class。

• 预设以remote 传送预设由Ajax 传送，在没有form_with的年代，form_for和form_tag会需要多下一条remote: true指令，如需修改预设值，输入local: true。

<%= form_with model: @user, local:  true  do  |form| %>

form_for

• 处理Model对象

<div class="form-group">
  <%= form_for @article, url:articles_path, multipart:true, remote:true do |f| %>
  <p>
    <%= f.label "分类："%>
    <%= f.collection_select :category_id, Category.all, :id, :name, include_blank: 'Select something' , class:"form-control",multiple: true %>
    <%= f.collection_check_boxes :category_ids, Category.all, :id, :name, {}, class:"checkbox-inline"%>
  </p>
  <p>
    <%= f.label :title, "Title"%>
    <%= f.text_field :title,class:'form-control' %>
  </p>
  <p>
    <%= f.label :content, "Content" %>
    <%= f.text_area :content,class:'form-control' %>
  </p>
  <%= f.submit "Submit", data:{:disable_with => 'Submiting...'},class:'btn btn-default' %>
  <% end %>
</div>

1.select

<%= f.collection_select :category_id, Category.all, :id, :name, include_blank: ‘Select something’ 或者prompt: "Select something", class:"form-control",multiple: true %>

等同于

  <%= f.select :category_id, Category.all.map{ |e| [e.name, e.id]} ,include_blank: ‘Select something’ 或者prompt: "Select something", class:"form-control",multiple: true %>

等同于

 <%= select_tag 'event[category_id]', options_for_select(Category.all.map{ |e| [e.name, e.id]} ), {include_blank: ‘Select something’ 或者prompt: "Select something"}, class:"form-control",multiple: true %>

加class前面必须有options ={}或者{}，include_blank: ‘Select something’用来设置默认的提示信息prompt和include_blank一样，值为空，multiple: true设置多选，然后修改ArticlesController的article_params好可以接收到category_id参数。这样资料就会存进数据库了。

def event_params
	params.require(:article).permit(:name, :description, :category_id)
end

2. checkbox

<%= f.collection_check_boxes :category_ids, Category.all, :id, :name,options ={}, class:"checkbox-inline"%>

等同于

<% Category.all.each do |g| %>
  <%= check_box_tag "category_ids[]", g.id, Category.all.map(&:id).include?(g.id), id: "category_ids_#{g.id}"  %> 
  <label for="category_ids_<%= g.id %>"> <%= g.name %></label>
<% end %>

<%= f.collection_check_boxes :checkbox_option_ids, @xtjsqks, :id, :name do |b| %>
  <%= b.label style:"margin-right: 20px" do %>
     <%= b.check_box + ' ' + b.text %>
  <% end %>
<% end %>

加class前面必须有options ={}，修改ArticlesController的article_params好可以接收到group_ids参数。

def event_params
	params.require(:article).permit(:name, :description, :category_id, :group_ids => [] )
end

3. 隐藏传值hidden_field

<%= f.hidden_field :user_id, :value => params[:user_id] %>

4. Radio Butto：用 label 标签包起来的话，点选文字才会有选 radio 的效果

<% Event::STATUS.each do |status| %>
    <label>
      <%= f.radio_button :status, status, status == 'public' %>
      <%= t(status, :scope => "event.status") %>
    </label>
<% end %>

# event.rb
STATUS = [ 'draft', 'public', 'private' ]

# zh-cn.yml
zh-CN:
	event:
		status:
			draft: 草稿
			publict: 公开
			private: 秘密

上面这段等同于：

   <label>
      <%= f.radio_button :status, 'draft' %>
      草稿
    </label>
    <label>
      <%= f.radio_button :status, 'public' , checked %>
      公开
    </label>
    <label>
      <%= f.radio_button :status, 'private' %>
      私密
    </label>