ActiveAdmin中整数数组表单字段的参数许可与输入适配问题

1. 正确配置permit_params #

问题的核心是表单提交的参数格式与Rails/ActiveAdmin的参数解析逻辑不匹配，分两种场景处理：

场景1：表单提交数组格式参数 #

如果用多输入控件（如复选框、动态输入框）提交数组，直接使用数组形式的许可配置：

permit_params :firstname, :lastname, scopi: []

场景2：表单提交逗号分隔字符串 #

如果用单行文本框输入内容，先许可字符串参数，再在模型层做格式转换：

permit_params :firstname, :lastname, :scopi

然后在Persona模型中添加参数转换逻辑：

class Persona < ApplicationRecord
  before_validation :parse_scopi

  private

  def parse_scopi
    # 将逗号分隔的字符串转为整数数组，过滤空值和非数字内容
    if scopi.is_a?(String)
      self.scopi = scopi.split(',').map(&:strip).select { |s| s.match?(/^\d+$/) }.map(&:to_i)
    end
  end
end

2. 适配Formtastic表单输入 #

根据业务需求选择以下输入方式：

方式1：逗号分隔文本输入（适合任意整数数组） #

用单行文本框接收输入，配合模型的转换逻辑：

ActiveAdmin.register Persona do
  permit_params :firstname, :lastname, :scopi

  form do |f|
    f.inputs do
      f.input :firstname
      f.input :lastname
      f.input :scopi, as: :string, placeholder: "示例：1,2,3", hint: "用逗号分隔整数"
    end
    f.actions
  end
end

方式2：复选框组（适合固定可选值的场景） #

如果scopi的可选值是固定范围（如1-5），用复选框组提交数组：

ActiveAdmin.register Persona do
  permit_params :firstname, :lastname, scopi: []

  form do |f|
    f.inputs do
      f.input :firstname
      f.input :lastname
      f.input :scopi, as: :check_boxes, collection: (1..5).map { |num| [num, num] }
    end
    f.actions
  end
end

方式3：动态添加输入框（适合动态数量的整数） #

通过JS实现动态添加输入框，直接提交数组参数：

ActiveAdmin.register Persona do
  permit_params :firstname, :lastname, scopi: []

  form do |f|
    f.inputs do
      f.input :firstname
      f.input :lastname
      div id: "scopi-input-group" do
        # 渲染已有数组项的输入框
        f.object.scopi.each do |val|
          f.text_field "scopi[]", value: val, class: "scopi-input"
        end
      end
      button "添加项", type: "button", id: "add-scopi-btn"
    end
    f.actions
  end

  # 注入动态添加的JS
  sidebar nil, only: [:new, :edit] do
    javascript_tag do
      <<~JS
        document.getElementById('add-scopi-btn').addEventListener('click', function() {
          const group = document.getElementById('scopi-input-group');
          const input = document.createElement('input');
          input.type = 'text';
          input.name = 'persona[scopi][]';
          input.className = 'scopi-input';
          group.appendChild(input);
        });
      JS
    end
  end
end

验证要点 #

• 提交表单后检查数据库，确认scopi字段保存为整数数组而非空数组或字符串
• 测试边界情况：输入空字符串、非数字内容，确保转换逻辑能过滤无效值，最终保存符合约束的空数组或有效数组

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