simple_nested_form_for の子 & 孫関係で動的にフォームを追加する

モデリング

app/models/user.rb

class User < ApplicationRecord
  has_many :articles, :dependent => :destroy
  accepts_nested_attributes_for :articles, allow_destroy: true
end

app/models/article.rb

  belongs_to :user
  has_many :cmments, :dependent => :destroy
  accepts_nested_attributes_for :comments, allow_destroy: true

app/models/comment.rb

  belongs_to :article

• articleをまとめて設定する為には、親要素のUserに対して、accepts_nested_attributes_forを記述。
• commentをまとめて設定する為には、親要素のArticleに対して、accepts_nested_attributes_forを記述。

こうすることで、孫要素までnested_formを使うことが可能。
- allow_destroy: true　としていないと子項目の削除ができないようになっています。

controller

users_controoler.rb

def new
  @user = User.new
  @article = @user.articles.build
  @comment = @article.comments.build
end

private
  def user_params
    params.requrie(:user).permit(:name, :email, articles_attributes: [:id, :description, :_destroy,
                                                         comments_attributes: [:id, :comment, :_destroy]])
  end

• 合わせてストロングパラメーターの _destroy も入れておく必要がある（入れないと削除できない）
• 子要素は親要素のストロングパラメーターに含めて記述できる(孫要素もこちらにまとめて記述する)
• 基本的に、newのページ以外でも必ずbuildして、インスタンス変数を作成しておく必要がある。

new.html.haml

    = simple_nested_form_for @user, url: ~~~~path do |f|
      = f.simple_fields_for :comments do |f|
        = f.text_field :comments
      = f.link_to_remove '削除'`
      = f.link_to_add '追加', :shift_patterns
      = f.submit '保存'

こんな感じで書いてやれば、ちゃんと動くはず。
あとは、createのアクションもusers_controller.rbに追加してやれば動くはず。

application.js

  //= require jquery
　//= require jquery_ujs
　//= require jquery-ui
　//= require jquery-ui/i18n/datepicker-ja
  //= require remodal.min
  //= require activestorage
  //= require serviceworker-companion
  //= require jquery_nested_form　← 

//= require jquery_nested_form
require jqureyのあとに入れてやらないと動かないので注意！！

参考

https://qiita.com/obmshk/items/0e942177d8a44091bf09
今回はこちらの記事を参考に書いています。

最後に

• 普通なら、jquery などで、追加や削除の記述をしないといけない。
• updateとcreateを同時に実行するとき調べると、かなりややこしいことをしないといけなさそうだった。
• そんなときにめちゃくちゃ便利でした。記述も簡単なので実際に使ってみるとすごい楽なので是非つかってください。