如何基于Devise实现关联多模型的动态嵌套注册表单？

嘿，我来一步步教你搞定这个需求！咱们用多态关联+嵌套表单+前端动态切换的方案，完美实现你要的效果：

1. 配置模型关联与嵌套属性 #

首先得让Account和Business、Personnel建立正确的关联，同时允许嵌套属性提交。

Account模型修改 #

# app/models/account.rb
class Account < ApplicationRecord
  # 你的Devise模块（比如:database_authenticatable, :registerable这些）
  belongs_to :accountable, polymorphic: true, optional: true
  accepts_nested_attributes_for :business, :personnel

  # 初始化时默认选中Personnel类型
  after_initialize :set_default_accountable_type, if: :new_record?

  private

  def set_default_accountable_type
    self.accountable_type ||= 'Personnel'
  end
end

Business和Personnel模型修改 #

给它们加上多态关联：

# app/models/business.rb
class Business < ApplicationRecord
  has_one :account, as: :accountable
end

# app/models/personnel.rb
class Personnel < ApplicationRecord
  has_one :account, as: :accountable
end

2. 自定义Devise注册控制器，允许嵌套参数 #

Devise默认的控制器不允许嵌套属性提交，所以咱们得自定义一个：

先生成控制器文件：

rails generate devise:controllers accounts

然后修改控制器的强参数，把嵌套属性加进去：

# app/controllers/accounts/registrations_controller.rb
class Accounts::RegistrationsController < Devise::RegistrationsController
  private

  def sign_up_params
    params.require(:account).permit(
      :email, :password, :password_confirmation, :accountable_type,
      # 替换成你Business模型的实际属性
      business_attributes: [:id, :company_name, :address, :tax_number],
      # 替换成你Personnel模型的实际属性
      personnel_attributes: [:id, :real_name, :phone, :id_card]
    )
  end
end

最后在路由里指向这个自定义控制器：

# config/routes.rb
devise_for :accounts, controllers: { registrations: 'accounts/registrations' }

3. 修改注册视图，实现动态切换表单 #

接下来就是前端部分，让单选按钮切换时显示对应的表单区域：

替换app/views/accounts/registrations/new.html.erb的内容：

<h2>注册账户</h2>

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
  <%= render "devise/shared/error_messages", resource: resource %>

  <!-- 基础账户字段 -->
  <div class="field">
    <%= f.label :email %><br />
    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
  </div>

  <div class="field">
    <%= f.label :password %>
    <% if @minimum_password_length %>
      <em>(最少<%= @minimum_password_length %>个字符)</em>
    <% end %><br />
    <%= f.password_field :password, autocomplete: "new-password" %>
  </div>

  <div class="field">
    <%= f.label :password_confirmation %><br />
    <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
  </div>

  <!-- 账户类型单选按钮 -->
  <div class="field">
    <%= f.radio_button :accountable_type, 'Personnel', checked: true, id: 'personnel_type' %>
    <%= f.label :accountable_type, '个人用户', for: 'personnel_type' %>
    <%= f.radio_button :accountable_type, 'Business', id: 'business_type' %>
    <%= f.label :accountable_type, '企业用户', for: 'business_type' %>
  </div>

  <!-- 个人信息嵌套表单 -->
  <div id="personnel_fields">
    <%= f.fields_for :personnel, resource.personnel || Personnel.new do |pf| %>
      <div class="field">
        <%= pf.label :real_name %><br />
        <%= pf.text_field :real_name %>
      </div>
      <div class="field">
        <%= pf.label :phone %><br />
        <%= pf.text_field :phone %>
      </div>
      <!-- 其他个人属性字段 -->
    <% end %>
  </div>

  <!-- 企业信息嵌套表单（默认隐藏） -->
  <div id="business_fields" style="display: none;">
    <%= f.fields_for :business, resource.business || Business.new do |bf| %>
      <div class="field">
        <%= bf.label :company_name %><br />
        <%= bf.text_field :company_name %>
      </div>
      <div class="field">
        <%= bf.label :address %><br />
        <%= bf.text_field :address %>
      </div>
      <!-- 其他企业属性字段 -->
    <% end %>
  </div>

  <div class="actions">
    <%= f.submit "注册" %>
  </div>
<% end %>

<%= render "devise/shared/links" %>

<!-- 动态切换表单的JS -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const personnelRadio = document.getElementById('personnel_type');
    const businessRadio = document.getElementById('business_type');
    const personnelFields = document.getElementById('personnel_fields');
    const businessFields = document.getElementById('business_fields');

    // 切换表单显示状态的函数
    function toggleAccountFields() {
      if (personnelRadio.checked) {
        personnelFields.style.display = 'block';
        businessFields.style.display = 'none';
      } else {
        personnelFields.style.display = 'none';
        businessFields.style.display = 'block';
      }
    }

    // 页面加载时先执行一次，确保默认状态正确
    toggleAccountFields();

    // 监听单选按钮变化
    personnelRadio.addEventListener('change', toggleAccountFields);
    businessRadio.addEventListener('change', toggleAccountFields);
  });
</script>

4. 处理关联对象的创建 #

最后一步，当Account创建成功时，自动创建对应的Business或Personnel对象。在Account模型里加个回调：

# app/models/account.rb
after_create :create_associated_accountable

private

def create_associated_accountable
  case accountable_type
  when 'Personnel'
    create_personnel(personnel_attributes)
  when 'Business'
    create_business(business_attributes)
  end
end

这样就搞定啦！测试一下：默认显示个人用户表单，切换到企业用户时会自动显示企业表单，提交后对应的关联对象也会被创建出来~

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