simple_formカスタマイズTIPS集

必須のマークをラベル右側に出す

こんな風にしたいとき↓

configの以下の部分のコメントアウトを外します。

config/initializers/simple_form.rb

config.label_text = lambda { |label, required, explicit_label| "#{label} #{required}" }

エラーメッセージをフルメッセージで出す

デフォルトの設定のままだとエラーメッセージは以下のように表示されます。
でもこれだとレイアウトによってはおかしなことになってしまいます。
こんな風に↓

configで:errorの行をコメントアウト、:full_errorの行のコメントアウトを外します。

config/initializers/simple_form.rb

# b.use :error, wrap_with: { tag: :span, class: :error }
b.use :full_error, wrap_with: { tag: :span, class: :error }

すると、このようになりました。

日本語化とplaceholderとhintの扱い

日本語化（i18n）対応

i18n対応についてはsimple_formのドキュメントにも書いてあるとおりですが、config/locale以下にドキュメントにあるenファイルと同じような構成で以下のようなymlファイルを作ります。

config/locales/simple_form.ja.yml

ja: # jaにする
  simple_form:
    labels:
      user:
        username: 'ユーザー名'
        password: 'パスワード'
    hints:
      user:
        username: 'サインインするユーザ名を入力してください'
        password: '半角英数字のみ使えます'
    placeholders:
      user:
        username: 'なまえ'
        password: '****'

上のymlは抜粋なので全部の構成はこちらを参考に：https://github.com/plataformatec/simple_form#i18n

placeholderとhint

__placeholder__はhtml5から実装された仕様でテキストフィールドの背景にうっすらグレーでテキストが表示されます。
よく見るこういうのです。

__hint__はフォームの下に小さめの文字で書いてある、入力内容についてのヒントです。

placeholderはerbやslimなどのviewファイルに記載することでも表示できますが…

_form.html.slim

= f.input :parking_details, 
	placeholder: '¥500/1時間　100台', 
	hint: '駐車場料金、利用制限がある場合は制限内容、専用駐車場がない場合は近隣の駐車場情報など'

ymlに書くだけでも表示されるので、ymlにまとめて書く方がテキストが一箇所で管理できてviewファイルに余計な内容を書かずに済むのでおすすめです。

config/locales/simple_form.ja.yml

ja:
  simple_form:
    hints:
      spot:
        parking_details: '駐車場料金、利用制限がある場合は制限内容、専用駐車場がない場合は近隣の駐車場情報など'
    placeholders:
      spot:
        parking_details: '¥500/1時間　100台'

ymlに上のように書いておけばslimはこれ↓でOK。

_form.html.slim

= f.input :parking_details

radio/checkboxなどをdivで囲む

simple_formのconfigに以下の行があります。
デフォルトではコメントアウトされてますが、これを有効にして囲みたいタグとclass名を設定します。

config/initializers/simple_form.rb

config.collection_wrapper_tag = :div
config.collection_wrapper_class = 'group_input'

この設定をすることにより、form中のすべてのradio/check boxが<div class="group_input">で囲まれます。

囲んだdivに更に別のclass名を当てたい時には以下のようにします。

= f.input :gender, as: :radio_buttons, collection_wrapper_class: 'hoge'

上記の出力結果

<div class="input radio_buttons optional">
	<label class="radio_buttons optional">性別</label>
	<div class="group_input hoge"> <!-- divで囲まれclassが追加されている-->
		<span class="radio">
			<label for="user_gender_male">
				<input class="radio_buttons optional" type="radio" value="male" name="user[gender]" id="user_gender_male">
				"男性"
			</label>
			<label for="user_gender_female">
				<input class="radio_buttons optional" type="radio" value="female" name="user[gender]" id="user_gender_female">
				"女性"
			</label>
		</span>
	</div>
</div>

参考：
http://stackoverflow.com/questions/19605976/simple-form-collection-wrapper-radios-buttons-double-encapsulation-of-items

子モデルの要素をcollection_select

前提：

category.rb

has_many :spots

spot.rb

belongs_to :category

日本語化の必要が無い場合には、以下の形でcategoryを選択することが出来ます。

_form.html.slim

= simple_form_for @spot do |f|
	= f.association :category, label_method: :name, value_method: :id
end	

ラベルにI18nを適用しようとした場合、f.associationを使ったうまいやり方がどうしてもわからず、以下のような形で実装しました。

_form.html.slim

= simple_form_for @spot do |f|
	= f.input :category_id, collection: Category.all.map{|v| [t("subcategory.#{v.subcategory}"),v.id]}
end

nameとvalueのセットのArrayをcollectionに渡します。
map内でI18n.tを使うことで、nameが日本語化されます。