Rails x Bootstrap4 x nested_attributes 양식 디자인 패턴

설치

gem 'cocoon'

//= require cocoon

모델에 구현

class User < ApplicationRecord
  ATTRIBUTES = %i[name].freeze

  has_many :dogs, dependent: :destroy, inverse_of: :user
  accepts_nested_attributes_for :dogs, allow_destroy: true, reject_if: :all_blank
end

class Dog < ApplicationRecord
  # nested_attributesの都合上、idと_destroyを加えている。
  ATTRIBUTES = %i[id _destroy name].freeze

  belongs_to :user
end

컨트롤러에 구현

class UsersController < ApplicationController
  def new
    @user = User.new
  end

  def create
    @user = User.new(user_params)
    if @user.save
      redirect_to @user
    else
      render :new
    end
  end

  private

  def user_params
    params
      .require(:user)
      .permit([*User::ATTRIBUTES, dogs_attributes: Dog::ATTRIBUTES])
  end
end

뷰 구현

app/views/users/
├── _dog_fields.html.slim
├── new.html.slim
└── show.html.slim

/ show.html.slim
p
  strong Name:
  = @user.name

ul
  - @user.dogs.each do |dog|
    li = dog.name

=> link_to 'Edit', edit_user_path(@user)
'|
=< link_to 'Back', users_path

/ new.html.slim
h2.py-3 New use
= form_for @user do |f|
  .form-group.row
    .col-md-3
      = f.label :name
    .col-md-9
      = f.text_field :name, class: 'form-control'
  .form-group.row
    .col-md-3
      = f.label :dogs
    .col-md-9.ml-auto
      #dogList
        = f.fields_for :dogs do |dog|
          = render 'dog_fields', f: dog
      = link_to_add_association f, :dogs, class: "btn btn-link", data: { association_insertion_node: "#dogList", association_insertion_method: "append" } do
        = fa_icon "plus", text: "アイテムを追加"
  = f.submit 'Submit', class: 'btn btn-success w-100'

/ _dog_fields.html.slim
.nested-fields.mb-3
  .form-row
    .col-md-10
      = f.text_field :name, placeholder: '名前', class: 'form-control'
    .col-md-2
      = link_to_remove_association "削除", f, class: "btn btn-danger"

요약