Rails: Assigning associations via HTML forms

Updated . Posted . Visible to the public.

Let's say we have posts with an attribute title that is mandatory.

Our example feature request is to tag these posts with a limited number of tags. The following chapters explain different approaches in Rails, how you can assign such an association via HTML forms. In most cases you want to use Option 4 with assignable values.

The basic setup for all options looks like this:

config/routes.rb

Rails.application.routes.draw do
  root "posts#index"
  resources :posts, except: [:show, :destroy]
end

db/migrate/20230510093740_create_posts.rb

class CreatePosts < ActiveRecord::Migration[7.0]
  def change
    create_table :posts do |t|
      t.string :title, null: false
    end
  end
end

app/models/post.rb

class Post < ApplicationRecord
  validates :title, presence: true
end

app/controllers/posts_controller.rb

class PostsController < ApplicationController
  def index
    load_posts
  end

  def new
    build_post
  end

  def create
    build_post
    if @post.save
      redirect_to posts_path
    else
      render 'new'
    end
  end

  def edit
    load_post
    build_post
  end

  def update
    load_post
    build_post
    if @post.save
      redirect_to posts_path
    else
      render 'edit'
    end
  end

  private

  def load_post
    @post ||= Post.find(params[:id])
  end

  def build_post
    @post ||= Post.new
    @post.attributes = post_params
  end

  def post_params
    params.fetch(:post, {}).permit(
      :title,
    )
  end

  def load_posts
    @posts ||= Post.all.to_a
  end
end

app/views/posts/index.haml

%h1 Posts

= link_to('New Post', new_post_path)

- if @posts.present?
  %table
    %thead
      %tr
        %th Title
        %th
    %tbody
      - @posts.each do |post|
        %tr
          %td= post.title
          %td= link_to('Edit post', edit_post_path(post))

- else
  %p No posts yet

app/views/posts/new.haml

%h1 New post
= render ('posts/form')

app/views/posts/edit.haml

%h1 Edit post
= render ('posts/form')

app/views/posts/_form.haml

= form_with(model: @post) do |form|
  = form.label(:title, 'Title')
  = form.text_field(:title)
  = form.submit

Our example feature request is to tag these posts with a limited number of tags. The following chapters explain different approaches in Rails, how you can assign such an association via HTML forms.

Option 1: Array column

Image

One way to solve the problem is using a database column with an array of strings.

db/migrate/20230510093740_create_posts.rb

   def change
     create_table :posts do |t|
       t.string :title, null: false
+      t.string :tags, :string, array: true, null: false, default: []
 
       t.timestamps
     end

app/models/post.rb

 class Post < ApplicationRecord
+  ASSIGNABLE_TAGS = ['food', 'programming', 'traveling']
+
   validates :title, presence: true
 end

app/controllers/posts_controller.rb

   def edit
     load_post
-    build_post
   end
   
   def post_params
+    params.with_defaults!(post: { tags: [] })
     params.fetch(:post, {}).permit(
       :title,
+      tags: [],
     )
   end

app/views/posts/_form.haml

 = form_with(model: @post) do |form|
   = form.label(:title)
   = form.text_field(:title)
+
+  = field_set_tag('Tags') do
+    = form.collection_check_boxes(:tags, Post::ASSIGNABLE_TAGS, :to_s, :to_s, include_hidden: false)
   = form.submit

<form action="/posts" accept-charset="UTF-8" method="post">
  <label for="post_title">Title</label>
  <input type="text" name="post[title]" id="post_title">
  <fieldset>
    <legend>Tags</legend>
    <input type="checkbox" value="food" name="post[tags][]" id="post_tags_food">
    <label for="post_tags_food">food</label>
    <input type="checkbox" value="programming" name="post[tags][]" id="post_tags_programming">
    <label for="post_tags_programming">programming</label>
    <input type="checkbox" value="traveling" name="post[tags][]" id="post_tags_traveling">
    <label for="post_tags_traveling">traveling</label>
  </fieldset><input type="submit" name="commit" value="Create Post" data-disable-with="Create Post">
</form>

Pro

  • Lightweight implementation
  • No Associations required
  • Out of the box support from Rails
  • Supports localization of the labels (here just .to_s for value and label for simplicity)

Cons

  • Adding new values requires a code change
  • Changing existing values requires a data migration
  • SQL queries on array columns have limitations
  • We need to take care of not assigning nil as value of posts
    • Option 1: Using with_defaults! in the controller + include_hidden: false in the form (used in the example; requires to remove build_post form the edit action)
    • Option 2: Reject blank values before save e.g. before_validate { posts.reject!(&:blank) } in the post.rb model

Option 2: Array column with associated records

Image

db/migrate/20230510093740_create_posts.rb

 class CreatePosts < ActiveRecord::Migration[7.0]
   def change
     create_table :posts do |t|
       t.string :title, null: false
+      t.integer :tag_ids, array: true, null: false, default: []
 
       t.timestamps
     end

db/migrate/20230516064203_create_tags.rb

+class CreateTags < ActiveRecord::Migration[7.0]
+  def change
+    create_table :tags do |t|
+      t.string :name, null: false
+
+      t.timestamps
+    end
+  end
+end

app/models/tag.rb

+class Tag < ApplicationRecord
+  validates :name, presence: true
+end

app/controllers/posts_controller.rb

   def edit
     load_post
-    build_post
   end
 
   def post_params
+    params.with_defaults!(post: { tag_ids: [] })
     params.fetch(:post, {}).permit(
       :title,
+      tag_ids: [],
     )
   end

app/views/posts/_form.haml

 = form_with(model: @post) do |form|
   = form.label(:title)
   = form.text_field(:title)
+  = field_set_tag('Tags') do
+    = form.collection_check_boxes(:tag_ids, Tag.all, :id, :name, include_hidden: false)
   = form.submit

<form action="/posts" accept-charset="UTF-8" method="post">
  <label for="post_title">Title</label>
  <input type="text" name="post[title]" id="post_title">
  <fieldset>
    <legend>Tags</legend>
    <input type="checkbox" value="1" name="post[tag_ids][]" id="post_tag_ids_1">
    <label for="post_tag_ids_1">food</label>
    <input type="checkbox" value="2" name="post[tag_ids][]" id="post_tag_ids_2">
    <label for="post_tag_ids_2">programming</label>
    <input type="checkbox" value="3" name="post[tag_ids][]" id="post_tag_ids_3">
    <label for="post_tag_ids_3">traveling</label>
  </fieldset>
  <input type="submit" name="commit" value="Create Post" data-disable-with="Create Post">
</form>

Pro

  • Separate model for tags
  • Adding new tags does not need a data migration

Cons

  • Dropping tags does need a data migration or custom code since we have no build-in dependent: :destroy support in ActiveRecord
  • SQL queries on array columns have limitations

Notes

  • The checked option is not set in case we use a post_ids column of type string instead of integer
  • We need to take care of not assigning nil as value of post_ids
    • Option 1: Using with_defaults! in the controller + include_hidden: false in the form (used in the example; requires to remove build_post form the edit action)
    • Option 2: Reject blank values before save e.g. before_validate { post_ids.reject!(&:blank) } in the post.rb model

Option 3: Join model with ids_setter

Image

db/migrate/20230516064203_create_tags.rb

+class CreateTags < ActiveRecord::Migration[7.0]
+  def change
+    create_table :tags do |t|
+      t.string :name, null: false
+
+      t.timestamps
+    end
+  end
+end

db/migrate/20230516075502_create_taggings.rb

+class CreateTaggings < ActiveRecord::Migration[7.0]
+  def change
+    create_table :taggings do |t|
+      t.references :post, null: false, foreign_key: true
+      t.references :tag, null: false, foreign_key: true
+
+      t.timestamps
+    end
+
+    add_index :taggings, [:post_id, :tag_id], unique: true
+  end
+end

app/views/posts/_form.haml

 = form_with(model: @post) do |form|
   = form.label(:title)
   = form.text_field(:title)
+  = field_set_tag('Tags') do
+    = form.collection_check_boxes(:tag_ids, Tag.all, :id, :name)
   = form.submit

app/models/post.rb

 class Post < ApplicationRecord
   validates :title, presence: true
+
+  has_many :taggings, dependent: :destroy
+  has_many :tags, through: :taggings
 end

app/models/tag.rb

+class Tag < ApplicationRecord
+  validates :name, presence: true
+
+  has_many :taggings, dependent: :destroy
+  has_many :posts, through: :taggings
+end

app/models/tagging.rb

+class Tagging < ApplicationRecord
+  belongs_to :post
+  belongs_to :tag
+
+  validates :post, uniqueness: { scope: :tag }
+end

app/controllers/posts_controller.rb

   def post_params
     params.fetch(:post, {}).permit(
       :title,
+      tag_ids: [],
     )
   end

app/views/posts/_form.haml

 = form_with(model: @post) do |form|
   = form.label(:title)
   = form.text_field(:title)
+  = field_set_tag('Tags') do
+    = form.collection_check_boxes(:tag_ids, Tag.all, :id, :name)
   = form.submit

Pro

  • Separate model for tags
  • Dependent destroy for the join model
  • Adding and removing tags does not need any data migration

Cons

  • post.tag_ids is a ids_setter Show archive.org snapshot method, that saves immediately. So you will add or remove tags even if your form has errors (possible fix: Additional transaction in your model model).

Option 4: Join model with nested attributes

Image

db/migrate/20230516064203_create_tags.rb

+class CreateTags < ActiveRecord::Migration[7.0]
+  def change
+    create_table :tags do |t|
+      t.string :name, null: false
+
+      t.timestamps
+    end
+  end
+end

db/migrate/20230516075502_create_taggings.rb

+class CreateTaggings < ActiveRecord::Migration[7.0]
+  def change
+    create_table :taggings do |t|
+      t.references :post, null: false, foreign_key: true
+      t.references :tag, null: false, foreign_key: true
+
+      t.timestamps
+    end
+
+    add_index :taggings, [:post_id, :tag_id], unique: true
+  end
+end

app/views/posts/_form.haml

 = form_with(model: @post) do |form|
   = form.label(:title)
   = form.text_field(:title)
+  = field_set_tag('Tags') do
+    = form.collection_check_boxes(:tag_ids, Tag.all, :id, :name)
   = form.submit

app/models/post.rb

 class Post < ApplicationRecord
   validates :title, presence: true
+
+  has_many :taggings, dependent: :destroy
+  has_many :tags, through: :taggings
+
+  accepts_nested_attributes_for :taggings, allow_destroy: true
 end

app/models/tag.rb

+class Tag < ApplicationRecord
+  validates :name, presence: true
+
+  has_many :taggings, dependent: :destroy
+  has_many :posts, through: :taggings
+end

app/models/tagging.rb

+class Tagging < ApplicationRecord
+  belongs_to :post
+  belongs_to :tag
+
+  validates :post, uniqueness: { scope: :tag }
+end

app/controllers/posts_controller.rb

   def new
     build_post
+    build_tags
   end

   def edit
     load_post
     build_post
+    build_tags
   end
  
+  def build_tags
+    existing_tag_ids = @post.taggings.map { |tagging| tagging.tag_id }
+
+    Tag.find_each do |tag|
+      if existing_tag_ids.exclude?(tag.id)
+        @post.taggings.build(tag: tag).mark_for_destruction
+      end
+    end
+  end
+
   def post_params
     params.fetch(:post, {}).permit(
       :title,
+      taggings_attributes: [
+        :id,
+        :post_id,
+        :tag_id,
+        :_destroy
+      ]
     )
   end

app/views/posts/_form.haml

 = form_with(model: @post) do |form|
   = form.label(:title)
   = form.text_field(:title)
+  %table
+    %tbody
+      = form.fields_for(:taggings) do |taggings_form|
+        %tr
+          %td= taggings_form.object.tag.name
+          %td= taggings_form.hidden_field(:id, value: taggings_form.object.id)
+          %td= taggings_form.hidden_field(:tag_id, value: taggings_form.object.tag.id)
+          %td
+            = form.label(:_destroy, 'Destroy?')
+            = taggings_form.check_box(:_destroy)
   = form.submit

Pro

  • Separate model for tags
  • Dependent destroy for the join model
  • Adding and removing tags does not need any data migration
  • All operations are wrapped into one single transaction

Cons

  • Custom code to build the nested form associations
  • Requires UI extensions to make the form human readable

Notes

  • It makes sense to add CSS or JS to invert the Destroy? checkboxes. So a user can choose the tags that should be selected and not vice versa.
Screenshot_from_2023-05-16_15-05-53.pngScreenshot_from_2023-05-16_15-06-55.png
Emanuel
makandra.com
Say thanks
Last edit
Emanuel
Attachments
Screenshot_from_2023-05-16_15-05-53.png
Screenshot_from_2023-05-16_15-06-55.png
License
Source code in this card is licensed under the MIT License.
Posted by Emanuel to makandra dev (2023-05-08 10:50)
This website uses short-lived cookies to improve usability.
or learn more