Active Admin下Rails双层嵌套表单variant_sizes字段无法渲染问题

问题解决方案 #

你遇到的多层嵌套表单不渲染问题，可按以下步骤排查修复：

1. 修正模型拼写错误

• Variant模型中accepts_nested_attributes_for : variant_colours代码存在多余空格，需删除冒号后的空格
• 确认关联名拼写统一：当前模型中Variant关联名是英式拼写variant_colours（带u），但表单中调用的是美式拼写variant_colors（不带u），两者需完全保持一致，否则关联映射失败无法渲染子表单。

修正后的模型示例（统一用美式拼写为例）：

class Variant < ApplicationRecord
  has_many :variant_colors, dependent: :destroy
  # 去掉空格，拼写和关联名保持一致
  accepts_nested_attributes_for :variant_colors, allow_destroy: true
end

class VariantColor < ApplicationRecord
  belongs_to :variant
  has_many :variant_sizes, dependent: :destroy
  accepts_nested_attributes_for :variant_sizes, allow_destroy: true
end

class VariantSize < ApplicationRecord
  belongs_to :variant_color
end

2. 配置强参数

Active Admin默认会过滤未声明的参数，你需要在Variant的后台配置中加入两层嵌套的属性许可：

ActiveAdmin.register Variant do
  # 加入两层嵌套的属性，注意末尾的:_destroy用于支持删除嵌套记录
  permit_params :name, :product_id, :sku, :stock_quantity,
                variant_colors_attributes: [:id, :color, :sku_code, :stock, :_destroy,
                                            variant_sizes_attributes: [:id, :size, :sku_code, :stock, :_destroy]]

  # 后续你的表单、过滤器等配置
end

如果你的关联名保持英式拼写variant_colours，需把上述代码中的variant_colors_attributes对应改为variant_colours_attributes。

3. 优化表单写法

部分低版本Active Admin对多层嵌套的额外inputs包裹识别异常，可去掉内层多余的inputs块：

form do |f|
  f.inputs do
    f.input :name
    f.input :product
    f.input :sku
    f.input :stock_quantity
    f.has_many :variant_colors, heading: 'Variant Colors',
                                allow_destroy: true,
                                new_record: true do |color_form|
      color_form.input :color
      color_form.input :sku_code
      color_form.input :stock
      # 直接调用第二层has_many，无需额外套inputs块
      color_form.has_many :variant_sizes, heading: 'Variant Sizes',
                                          allow_destroy: true,
                                          new_record: true do |size_form|
        size_form.input :size
        size_form.input :sku_code
        size_form.input :stock
      end
    end
  end
  f.actions
end

完成以上修改后刷新页面即可正常渲染两层嵌套表单。

内容的提问来源于stack exchange，提问作者Hemant Patil