Ruby on Rails中无法用Bootstrap模态框创建Room页面求助

我最近在Ruby on Rails项目里尝试用Bootstrap模态框替换传统的new.html.erb页面来创建新的Room记录，但折腾了好久模态框就是没法正常渲染出来。因为我对JavaScript和Bootstrap模态框的基础概念不太熟，自己排查不出问题所在。下面我把相关的代码都贴出来，希望有大佬能帮我拆解下模态框在Rails里的运行逻辑，顺便找出我哪里写错了！

相关代码片段 #

Gemfile #

# 项目依赖配置
gem 'rails', '~> 7.0.4'
gem 'bootstrap', '~> 5.2.3'
gem 'sassc-rails'
# 其他项目依赖...

app/assets/javascripts/application.js #

// 项目JS入口
import "@hotwired/turbo-rails"
import "controllers"
import "bootstrap"

Room 模型（app/models/room.rb） #

class Room < ApplicationRecord
  validates :name, presence: true
  # 其他模型逻辑...
end

Rooms 控制器（app/controllers/rooms_controller.rb） #

class RoomsController < ApplicationController
  def index
    @rooms = Room.all
    @room = Room.new # 尝试在这里初始化新实例供模态框使用
  end

  def new
    @room = Room.new
  end

  def create
    @room = Room.new(room_params)
    if @room.save
      redirect_to rooms_path, notice: '房间创建成功'
    else
      # 暂时用跳转处理错误，不确定模态框里怎么处理
      redirect_to new_room_path, alert: '创建失败'
    end
  end

  private
  def room_params
    params.require(:room).permit(:name, :description)
  end
end

旧的new视图（app/views/rooms/new.html.erb） #

<h1>创建新房间</h1>
<%= render 'form', room: @room %>

新的模态框代码（放在app/views/rooms/index.html.erb里） #

<!-- 模态框触发按钮 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#newRoomModal">
  创建新房间
</button>

<!-- 模态框主体 -->
<div class="modal fade" id="newRoomModal" tabindex="-1" aria-labelledby="newRoomModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="newRoomModalLabel">创建新房间</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <%= render 'form', room: @room %>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
        <%= button_tag '提交', class: 'btn btn-primary' %>
      </div>
    </div>
  </div>
</div>

表单partial（app/views/rooms/_form.html.erb） #

<%= form_with(model: room) do |form| %>
  <% if room.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(room.errors.count, "error") %> prohibited this room from being saved:</h2>
      <ul>
        <% room.errors.each do |error| %>
          <li><%= error.full_message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field mb-3">
    <%= form.label :name, class: 'form-label' %>
    <%= form.text_field :name, class: 'form-control' %>
  </div>

  <div class="field mb-3">
    <%= form.label :description, class: 'form-label' %>
    <%= form.text_area :description, class: 'form-control' %>
  </div>
<% end %>

我对模态框逻辑的困惑点 #

1. 是不是必须用AJAX加载表单到模态框？直接在页面里写死模态框包含表单行不行？
2. 控制器里的new action现在还有用吗？如果用模态框的话是不是可以去掉？
3. 表单提交后如果验证失败，怎么把错误信息显示在模态框里而不是跳转到旧页面？

希望大佬们能先帮我解析下Bootstrap模态框在Rails项目里的基本运行逻辑，再帮我看看上面的代码哪里有问题，导致模态框无法正常渲染或者工作！

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