Ruby on Railsで動的に追加・削除可能な入力フォームの実装手順

はじめに

Ruby on Railsで作成したWebアプリで動的に入力フォームを追加したり削除したりできるようにしたのでその手順をメモします。なお、ここではテーブルの各セルが入力フォームとなっているような場合に、新しい入力フォームとなる行を動的に追加したり、削除したりできるようにしています。また、親モデルと子モデルにはhas_may関係があります。以下が動作イメージです。
add_remove_form_dynamically
「Add new」ボタンをクリックするとテーブルに新しい行が入力フォームとして追加されます。また、各行のActionカラムにある「Delete」をクリックすると、その行を削除します。

今回は以下URLの「nested_form_fields」というgemを使用しており、実装手順も以下URLに書いてある手順を参考にしています。

ncri/nested_form_fields | GitHub


環境と前提

  • Rails 4.2.0
  • Ruby 2.2.2

以降で説明に使用するWebアプリの概要としては、ホテル情報を登録、更新したり、登録したホテル情報を検索できるようなWebアプリです。そしてHotelモデルが親モデルとしてあり、RoomtypeモデルがHotelモデルの子モデル(has_many関連)となっています。各モデルは以下のようになっています。


nested_form_fieldsのインストール

まずはじめに「nested_form_fields」というGemを導入します。以下をGemfileに追記して

インストールします。

そして以下をapp/assets/javascripts/application.jsに追記します。

これで「nested_form_fields」のインストールは完了です。

Viewの編集

ここではHotelモデルの編集画面にて、子モデルであるRoomtypeモデルの入力フォームを動的に追加、削除できるようにします。そのためにedit.html.erbを以下のように編集します。

上記のnested_fields_forからRoomtypeモデルのフォーム生成部分になります。そしてremove_nested_fields_linkは入力フォームを削除するためのボタン、add_nested_fields_linkは入力フォームを新規追加するためのボタンを生成します。注意点は以下の3点です。

  • 動的に追加したいフォームの要素をwrapper_tag:で指定すること。例えば上記の例ではwrapper_tag:としてtrを指定しています。これによってnested_fields_forの中にあるtd要素を含むtr要素が生成されます。
  • remove_nested_fields_linknested_fields_forの中に配置すること
  • add_nested_fields_linknested_fields_forの外に配置すること

f.nested_fields_forに対応する部分として以下のようなHTMLが生成されます。


Controllerの編集

「nested_fields_for」が動作するには、以下のようにid_destoryをそれぞれStrong Parametersで許可する必要があります。Controllerの編集はこれだけです。


Modelの編集

モデルではaccepts_nested_attributes_forの部分を追記します。

以上で完了です。もし間違いやより良い方法などがありましたら教えて頂ければと思います。

このエントリーをはてなブックマークに追加

SPONSORED LINK

この投稿へのコメント

  1. said on 2015年8月9日 at 17:41

    記事を拝見いたしました。
    自分が今つまずいているところだったので大変勉強になりました!

    一つ質問なのですが、hotelで取得したroomtypeの値をhotelのshowみたいなページに表示するにはどうすればいいのですか?

コメントを残す

メールアドレスが公開されることはありません。

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL