Railsで使えるGem

Rails4でフォーム要素を動的に追加したり削除したり〜nested_form

投稿日:2014年1月20日 更新日:

参考

RailsCastsで紹介されてたフォームがGemになってたので試してみた

railscasts.com/episodes/196-nested-model-form-revised?view=asciicast

github.com/ryanb/nested_form

Rails4で 1対多、多対多関連しているときのフォームを作るなら、Nested Form Gemが便利

前提の環境

Modelにhas_manyとaccepts_nested_attributes_forが書いてある

関連するモデルの削除を許すなら allow_destroy: true オプションを付けておく

 

Gemfile

application.jsに追加

 

View

nested_form_forヘルパーが使える

link_to_addとlink_to_removeを配置する

READMEだとlink_to_addをpでくくってるけど、追加がうまくできなかった

Controller

Strong Paramatersで許可

このとき、:_destroyを許可しておく必要がある.

というのも、いったん追加したフォームはremoveしてもjqueryで隠しただけで、残っている.

そして、隠したフォームに、_destroyフラグをつけてsubmitしているため.

これがないと、いったん追加したあとに、removeしても、空欄のフォームのデータが追加されてしまうことになる.

できた

screenshot

パーシャル化

こんな感じでパーシャルに渡すこともできる このとき_task_fields.html.erbというファイル名のパーシャルを探しに行く

パーシャルにはfという変数に渡される

フォームを追加する場所を指定する

追加するフォームはaddリンクの直前に追加されるけど、これを任意の場所に追加するようにしてみる

追加するフォームにはdiv.fieldsというタグがつくので、これをつけないようにする

試しにtableでくくる このとき追加する場所を指定するためにidをつけておく

link_to_addでtarget指定する

パーシャルをtr要素にしておく このときにクラスにfieldsをつけておく これがないと削除できない

できた

screenshot

一対一の場合

一対一の場合、フォームを一個だけ追加して、あとは追加しないという処理を追加する必要がある.

その場合、jQueryのイベントを使えば簡単に対処できる.
例えば、追加するフィールドに名前をつけて(ここでは、#sakana)、、、

で、addで追加されるフォームはdiv.fieldsでくくられているので、#sakana以下の.fields数を数えて1を越える場合は削除してしまう.

試した環境は、Rails5.0.0.1+simple_formでした.

そのほか

addとremoveのときにjqueryイベントを呼べるとか、simple_formでも使えるとか

番外編: 1つのモデルで任意の数のデータを送信するフォームの作例

前提

views(form)

まず、new.html.erbを作成する.
form_tagでサブミットボタンとQ&Aが貼られる場所、Q&Aの追加リンクを準備する.

routes

add_pathを作成.

controller

qandasコントローラにaddアクションを作成する.

views(js.coffeeテンプレート)

add.js.coffeeテンプレートを作成する.

views(パーシャル)

_qanda.html.erbを作成する.
ついでに、削除リンクを作っておく.

controller(create)

createアクションを作る.
できたフォームで送信されるデータは、こんな感じ.

これにあわせてStrongParameterとcreateを作成.

できた.

screenshot_from_2016-10-30-174251

-Railsで使えるGem
-,

執筆者:

関連記事

Backbone.jsで関連するモデルのREADとCREATE

By: woodleywonderworks – CC BY 2.0   ThoughtBotの本を読み進めてるけど私には買ってよかったと感じている ゾンビviewのワナを回避す …

TwitterBootstrapとGoogle Code Prittifyでうまくハイライトされないらしい

Deviseのユーザーと既存のMongoidモデルを関連づける

前提 Rails3.2でHTML5で取得した位置情報をMongoDBに保存してGoogleMapsでみる~mongoid、gmaps4rails Rails3.2+Mongoidでログイン機能~dev …

Rails4.2でselectを絞込できるselect2を使ってみた〜select2

By: Metropolitan Transportation Authority of the State of New York – CC BY 2.0 目次1 select22 Ge …

ElasticSearchをRubyから使う~elasticsearch-ruby

By: Harry Rose – CC BY 2.0 目次1 gem elasticsearch-ruby2 環境3 インスタンス作成4 メソッド一覧5 情報取得6 ドキュメントの作成7 …