Rails 5 + Mongoid哈希数组动态地址表单实现求助

Hey Kevin, 我之前在做Mongoid + Rails项目时也碰到过哈希数组字段的表单问题，fields_for确实不太适配这种非关联的哈希结构，给你分享两个靠谱的实现方案：

这个方法最直接，利用Rails的参数命名规则来让控制器正确接收哈希数组参数，同时在模型里处理赋值逻辑。

1. 模型层处理 #

首先在你的模型里定义addresses_attributes=方法，用来接收表单提交的参数并赋值给addresses字段：

class YourModel
  include Mongoid::Document
  field :addresses, type: Array, default: []

  # 处理表单提交的地址属性，过滤空地址
  def addresses_attributes=(attrs)
    self.addresses = attrs.values.reject { |addr| addr.values.all?(&:blank?) }
  end
end

2. 表单构建 #

放弃fields_for，手动生成符合参数格式的表单字段，同时添加动态增删的按钮：

<%= form_for @your_model do |f| %>
  <!-- 渲染已有的地址 -->
  <% @your_model.addresses.each_with_index do |address, index| %>
    <div class="address-group">
      <h4>地址 #<%= index + 1 %></h4>
      <%= label_tag "#{f.object_name}[addresses][#{index}][street]", "街道" %>
      <%= text_field_tag "#{f.object_name}[addresses][#{index}][street]", address[:street] %>

      <%= label_tag "#{f.object_name}[addresses][#{index}][city]", "城市" %>
      <%= text_field_tag "#{f.object_name}[addresses][#{index}][city]", address[:city] %>

      <%= button_tag "删除地址", type: "button", class: "remove-address" %>
    </div>
  <% end %>

  <!-- 添加新地址的按钮 -->
  <%= button_tag "添加地址", type: "button", id: "add-new-address" %>

  <%= f.submit "保存" %>
<% end %>

3. 动态增删的JS逻辑 #

用JavaScript实现点击按钮添加新地址字段，以及删除字段后重新索引（避免参数索引断层）：

document.addEventListener('DOMContentLoaded', function() {
  const addBtn = document.getElementById('add-new-address');
  const formContainer = document.querySelector('.address-group').parentNode;

  // 添加新地址字段
  addBtn.addEventListener('click', function() {
    const addressCount = document.querySelectorAll('.address-group').length;
    const newFieldHTML = `
      <div class="address-group">
        <h4>地址 #${addressCount + 1}</h4>
        <label for="your_model[addresses][${addressCount}][street]">街道</label>
        <input type="text" name="your_model[addresses][${addressCount}][street]" id="your_model_addresses_${addressCount}_street">

        <label for="your_model[addresses][${addressCount}][city]">城市</label>
        <input type="text" name="your_model[addresses][${addressCount}][city]" id="your_model_addresses_${addressCount}_city">

        <button type="button" class="remove-address">删除地址</button>
      </div>
    `;
    formContainer.insertAdjacentHTML('beforeend', newFieldHTML);
  });

  // 删除地址并重新索引字段
  document.addEventListener('click', function(e) {
    if (e.target.classList.contains('remove-address')) {
      e.target.closest('.address-group').remove();
      // 重新给所有地址字段的索引赋值
      document.querySelectorAll('.address-group').forEach((group, newIndex) => {
        const inputs = group.querySelectorAll('input');
        inputs.forEach(input => {
          // 更新name属性
          input.name = input.name.replace(/\[addresses\]\[\d+\]/, `[addresses][${newIndex}]`);
          // 更新id属性和对应的label的for属性
          const newId = input.id.replace(/_addresses_\d+_/, `_addresses_${newIndex}_`);
          input.id = newId;
          const label = group.querySelector(`label[for="${newId}"]`);
          if (label) label.setAttribute('for', newId);
        });
      });
    }
  });
});

4. 控制器参数允许 #

在控制器里允许addresses的嵌套参数：

def your_model_params
  params.require(:your_model).permit(addresses: [:street, :city])
end

如果你更习惯用fields_for的语法，可以给模型添加一个虚拟属性，模拟成关联对象数组：

class YourModel
  include Mongoid::Document
  field :addresses, type: Array, default: []

  # 虚拟属性，把哈希转成OpenStruct对象，让fields_for识别
  def address_objects
    addresses.map { |addr| OpenStruct.new(addr) }
  end

  def address_objects=(objects)
    self.addresses = objects.map { |obj| obj.to_h.reject { |k, v| v.blank? } }
  end
end

然后表单里就可以用fields_for了：

<%= form_for @your_model do |f| %>
  <%= f.fields_for :address_objects do |addr_f| %>
    <div class="address-group">
      <%= addr_f.label :street %>
      <%= addr_f.text_field :street %>
      <%= addr_f.label :city %>
      <%= addr_f.text_field :city %>
      <%= button_tag "删除地址", type: "button", class: "remove-address" %>
    </div>
  <% end %>

  <%= button_tag "添加地址", type: "button", id: "add-new-address" %>
  <%= f.submit %>
<% end %>

动态增删的JS逻辑和方案一类似，只需要调整字段的name属性格式为your_model[address_objects][][street]即可。

Rails的fields_for最初是为Active Record的关联模型（比如has_many）设计的，它依赖于模型的关联方法和accepts_nested_attributes_for。而Mongoid的哈希数组字段不属于关联关系，所以fields_for无法自动识别并生成正确的参数格式，手动处理或者模拟虚拟属性是更合适的方式。

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