1. 安装Gem包

gem 'formtastic'

$ rails g formtastic:install

在application.css中添加

*= require formtastic 
*= require my_formtastic_changes

2. 新建Model

class CreateUsers < ActiveRecord::Migration
  def change
    create_table :users do |t|
      t.text :name
      t.string :desc

      t.timestamps null: false
    end
  end
end

3. 使用

<%= semantic_form_for @user do |f| %>
  <%= f.inputs :name, :desc, :created_at %>
  <%= f.actions :submit, :cancel %>
<% end %>

自动识别类型（时间如下）

shijian.png

4. 更常用

<%= semantic_form_for @user do |f| %>
  <%= f.inputs '基本信息', :id=>'basic_info' do %>
    <%= f.input :name, :as => :string %>
    <%= f.input :desc %>
    <%= f.input :created_at %>
  <% end %>
  <%= f.actions do %>
    <%= f.action :submit, :as => :button %>
    <%= f.action :cancel, :as => :link %>
  <% end %>
<% end %>

<%= f.inputs :name => '基本信息', :id=>'basic_info' do %> 修改id
<%= f.input :name, :label=>'姓名' ,:as => :string %>       更改label

inputs可以设置一些常用的参数

• :name 设置标签
• :id 设置html的id

input可以设置一些常用的参数

• :as ->(:radio, :string, :select, :check_boxes, :boolean, :datalist)
• :label 设置字符串
• :hint 设置字符串
• :required (false true)
• :input_html 设置Hash =>{:size=>10, :class=>'autogrow'}
• :wrapper_html 设置Hash=> { :style => "display:none;" }，给input一 个<li>标签包围。

action可以设置属性

• :button_html 设置Hash

5. 对象嵌套

新建一个Modal，Article。

class CreateArticles < ActiveRecord::Migration
  def change
    create_table :articles do |t|
      t.string :title
      t.text :content
      t.integer :user_id
      t.timestamps null: false
    end
  end
end

建立关联

class User < ActiveRecord::Base
  has_many :articles
  accepts_nested_attributes_for :articles
end

class Article < ActiveRecord::Base
  belongs_to :user
end

view中显示

<%= semantic_form_for @user do |f| %>
  <%= f.inputs :name => '基本信息', :id=>'basic_info' do %>
    <%= f.input :name, :label=>'姓名' ,:as => :string %>
    <%= f.input :desc, :as => :string %>
    <%= f.input :created_at %>
  <% end %>
###############嵌套属性##########################
  <%= f.semantic_fields_for :articles do |article| %>
    <%= article.inputs :title %>
    <%= article.inputs :content %>
    <!-- <%= article.inputs :title, :content, :name=>'文章' %>-->
  <% end %>
###############嵌套属性##########################
  <%= f.actions do %>
    <%= f.action :submit, :as => :button %>
    <%= f.action :cancel, :as => :link %>
  <% end %>
<% end %>

6. 设置命名空间控制id

<%= semantic_form_for(@post, :namespace => 'cat_form') do |f| %>
 <%= f.inputs do %>
   <%= f.input :title %> # id="cat_form_post_title"
   <%= f.input :body %> # id="cat_form_post_body"
   <%= f.input :created_at %> # id="cat_form_post_created_at"
 <% end %>
 <%= f.actions %>
 <% end %>

7. 其他嵌套

<%= f.input :articles, :as => :radio, :collection => @user.articles.all %>

8. 其他input

• :select
• :check_boxes
• :radio
• :time_zone
• :password
• :text
• :date_select
• :datetime_select
• :time_select
• :boolean
• :string
• :number
• :file
• :country
• :email
• :url
• :phone
• :search
• :hidden
• :range
• :datalist
• :image_upload

9. 本地化

使用顺序

1. :label
2. Formtastic i18n
3. Activerecord i18n
4. label_str_method

10. 小知识

<%= semantic_form_for(@post, :namespace => 'cat_form') do |f| %>
  <% f.object %> <!-- 获取对象 -->
<% end %>