Railsでnested_formを使って子モデルのフォームを動的に追加する

これまでに作った機能について簡単にまとめていく。

今回は、

子モデルのフォームの動的追加

前提条件

親モデルと子モデルを同時に作成・更新できること
まだの方はこちら

使用モデル

Blogモデル

Articleモデル（アソシエーションは記事中で追加）

Gemの導入

gem "nested_form"
gem 'jquery-rails'

bundle installの実行

nested_formの読み込み

app/assets/javascripts/application.js

//= require jquery_nested_form

フォームの変更

app/views/blogs/_form.html.erb

<%= nested_form_for(blog) do |f| %>
  
  <div class=“blog_form">
    <%= f.label :itle %>
    <%= f.text_field :title %>

    <%= f.label :content %>
    <%= f.text_field :content %>
  </div>

  <div class=“article_form">
    <%= f.fields_for :articles do |article| %>
   
      <%= article.label :title %>
      <%= article.text_field :title %>

      <%= article.label :content %>
      <%= article.text_field :content %>

      # 以下1行を追加
      <%= f.link_to_add :記事を追加, :articles %>

    <% end %>
  </div>

  <div class="action">
    <%= f.submit %>
  </div>

<% end %>

フォームを削除する場合は、以下を追加

link_to_remove

以上で作成完了