Rails 6.1中twitter-bootstrap-rails关联表单字段及单选组实现疑问

一、关联对象表单字段实现（保留form_group功能） #

twitter-bootstrap-rails 没有专门替代 Rails 原生 fields_for 的工具，但它的 bootstrap_form_for 生成的表单构建器完全兼容原生 fields_for——fields_for 返回的依然是 BootstrapForm::FormBuilder 实例，你可以在关联字段的块内直接使用 form_group 等带 Bootstrap 样式的方法，完美保留表单组的样式和功能。

举个实际例子（假设主模型为 Post，关联模型为 Comment，且 Post 已配置 accepts_nested_attributes_for :comments）：

<%= bootstrap_form_for @post do |f| %>
  <%# 主模型字段 %>
  <%= f.form_group :title do %>
    <%= f.label :title %>
    <%= f.text_field :title %>
  <% end %>

  <%# 关联对象Comment的表单字段 %>
  <%= f.fields_for :comments do |comment_form| %>
    <%# 关联对象的普通字段，用form_group包裹 %>
    <%= comment_form.form_group :content, label: "评论内容" do %>
      <%= comment_form.text_area :content, rows: 3 %>
    <% end %>

    <%# 这里可以继续添加关联对象的其他字段，包括下面要讲的单选按钮组 %>
  <% end %>

  <%= f.submit "保存", class: "btn btn-primary" %>
<% end %>

二、基于哈希数组创建单选按钮组 #

在 fields_for 的块内，你可以用 collection_radio_buttons 配合哈希数组快速生成带 form_group 的单选按钮组，无需手动循环拼接元素。

步骤示例： #

1. 定义哈希数组选项：

<% status_options = [
  { value: "approved", label: "已通过" },
  { value: "pending", label: "待审核" },
  { value: "rejected", label: "已拒绝" }
] %>

2. 在 fields_for 块内的 form_group 中使用 collection_radio_buttons：

<%= comment_form.form_group :status, label: "评论状态" do %>
  <% comment_form.collection_radio_buttons :status, status_options, :value, :label do |rb| %>
    <%= rb.label class: "radio-inline" do %>
      <%= rb.radio_button %> <%= rb.text %>
    <% end %>
  <% end %>
<% end %>

关键说明： #

• collection_radio_buttons 的参数依次为：数据库字段名、选项数组、哈希中对应「值」的键、哈希中对应「显示文本」的键。
• 通过块内的 rb.label 和 rb.radio_button 可以自定义单选按钮的样式，比如添加 Bootstrap 的 radio-inline 类实现横向排列。
• 生成的 HTML 会自动带上 Bootstrap 表单组的结构和单选按钮的样式，无需额外手动添加 class。

完整代码示例 #

结合以上两部分，完整的表单代码如下：

<%= bootstrap_form_for @post do |f| %>
  <%= f.form_group :title, label: "文章标题" do %>
    <%= f.text_field :title %>
  <% end %>

  <%= f.fields_for :comments do |comment_form| %>
    <%= comment_form.form_group :content, label: "评论内容" do %>
      <%= comment_form.text_area :content, rows: 3 %>
    <% end %>

    <%# 基于哈希数组的单选按钮组 %>
    <% status_options = [
      { value: "approved", label: "已通过" },
      { value: "pending", label: "待审核" },
      { value: "rejected", label: "已拒绝" }
    ] %>

    <%= comment_form.form_group :status, label: "评论状态" do %>
      <% comment_form.collection_radio_buttons :status, status_options, :value, :label do |rb| %>
        <%= rb.label class: "radio-inline" do %>
          <%= rb.radio_button %> <%= rb.text %>
        <% end %>
      <% end %>
    <% end %>

    <%= comment_form.check_box :_destroy, label: "删除此评论" %>
  <% end %>

  <%= f.submit "提交", class: "btn btn-primary" %>
<% end %>

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