simple_form Gem
[simple_form]Gemについて
[simple_form]Gemは、Railsでのフォームの記述を簡単にする為のGemです。
また、[enum_help]Gem(enumの日本語翻訳）と組み合わせる事で、enumを利用したラジオボタンを作成する時などに[enum_help]Gemの翻訳ファイルを読み込んで自動で日本語のラジオボタンなどにしてくれる。
[simple_form]Gemの主な使い方
Gemfileに以下のように記述する
[Gemfile] gem 'simple_form'
↓
$ bundle install
↓
以下コマンドで[simple_form]の設定ファイルを作成する
$ rails generate simple_form:install # [simple_form]Gemにbootstrapのデザインを適用したい場合は、下記で実行する rails generate simple_form:install --bootstrap
↓
[simple_form]Gemを使ったフォームの記述例を以下に示します。
[app/views ファイル] <%= simple_form_for @article, url: admin_article_path(@article.uuid) do |f| %> <%= f.input :title %> <%= f.input :slug %> <%= f.input :eye_catch, as: :file %> <%= f.input_field :position, as: :radio_buttons %> <%= f.input :eyecatch_width, placeholder: "100" %> <% end %>
[db/schema.rb] create_table "articles", force: :cascade do |t| t.string "slug" t.string "title" t.datetime "created_at", null: false t.datetime "updated_at", null: false t.integer "position", default: 0, null: false t.integer "eyecatch_width" t.index ["slug"], name: "index_articles_on_slug" end
上記で生成されるフォームは、以下のようになる。
これは、[simple_form_for]に渡した@articleと[f.input]に渡している属性からカラムのデータの型を確認して、formのtypeを勝手に決めてくれる
フォームのlabelの日本語は、「aoncig/locals/activerecord.ja.yml」にカラムの翻訳情報を記述しておくと勝手にlabelも日本語にしてくれる
また、こちらのフォームはバリデーションエラーの際も自動でエラーメッセージを以下のように表示してくれる
エラーメッセージに主語を付与したい場合は、下記の記事を参考にしてください
Rails: simple_formの日本語エラーメッセージに主語をつける方法
※ポイント
[simple_form]Gemは、勝手にフォームを作成してくれるがオプションを付与することでカスタマイズする事ができる(以下に一部の例を示します)
・プレースホルダーを付与する
<%= f.input :eyecatch_width, placeholder: "100" %>
・ラベル名を変える
<%= f.input :title, label: "ラベル名" %>
[simple_form]Gemは、カラムのデータ型を確認して自動でフォームのtypeを勝手に決めてくれるがオプションを付与することでフォームのtypeをカスタマイズする事ができる(以下に一部の例を示します)
asオプションを使ってinputタグのtype属性を変える事ができます
・ファイルのアップロードフォームを作成する(type属性をfileにする)
<%= f.input :eye_catch, as: :file %>
・ラジオボタンを作成する(type属性をradioにする)
<%= f.input_field :position, as: :radio_buttons %>
ラジオボタンを作成する時にハマったこと
ラジオボタンを作成する際に以下のように記述してもラジオボタンが生成されず、ハマってしまいました
<%= f.input :position, as: :radio_buttons %> # 下記が正しい記述 <%= f.input_field :position, as: :radio_buttons %>
上記は、inputタグに[form-control]というbootstrapのクラスが勝手に付与されてしまっているのが原因でした。
下記に[f.input]と[f.input_field]で生成されるHTMLを示します
※ 以下が[f.input]で生成されたHTML
<span class="radio radio radio">
<label for="article_position_left">
<input class="form-control enum_radio_buttons optional" type="radio" value="left" checked="checked" name="article[position]" id="article_position_left">
左寄せ
</label>
</span>
※ 以下が[f.input_field]で生成されたHTML
<span class="radio radio radio">
<label for="article_position_left">
<input class="enum_radio_buttons optional" type="radio" value="left" checked="checked" name="article[position]" id="article_position_left">
左寄せ
</label>
</span>
公式に[simple_form]Gemでは、通常のf.inputで生成されるフィールド周りのdivのラッパーを[f.input_field]で記述することで全て取り除くこともできると記述されている
