如何为Rails表单对象添加自定义表单组件？

要实现form.my_component和my_component_tag两种调用方式，你可以通过扩展Rails的Form Builder和创建全局Helper方法来完成，具体步骤如下：

1. 给Form Builder添加自定义方法 #

要让form.my_component生效，需要给Rails的FormBuilder类添加对应的方法，有两种规范的实现方式：

方式一：继承FormBuilder（推荐，避免全局污染） #

创建一个自定义的Form Builder类：

# app/helpers/my_component_form_builder.rb
class MyComponentFormBuilder < ActionView::Helpers::FormBuilder
  def my_component(attribute_name, label:, helper_text: nil)
    # 调用现有partial，传入所需参数
    @template.render(
      partial: "partials/my_component",
      locals: {
        form: self,
        name: attribute_name,
        label: label,
        helper_text: helper_text
      }
    ).html_safe
  end
end

使用时在form_for中指定builder：

<%= form_for @some_obj, builder: MyComponentFormBuilder do |form| %>
  <%= form.my_component :some_attribute, label: "Some Attr:", helper_text: "Enter something valid here." %>
<% end %>

如果希望全局所有form_for都默认使用这个builder，可以在ApplicationController中添加：

class ApplicationController < ActionController::Base
  default_form_builder MyComponentFormBuilder
end

方式二：直接扩展默认FormBuilder #

如果不想单独创建类，可以直接给默认的FormBuilder添加方法（在application_helper.rb中）：

# app/helpers/application_helper.rb
ActionView::Helpers::FormBuilder.class_eval do
  def my_component(attribute_name, label:, helper_text: nil)
    @template.render(
      partial: "partials/my_component",
      locals: {
        form: self,
        name: attribute_name,
        label: label,
        helper_text: helper_text
      }
    ).html_safe
  end
end

这样无需指定builder，直接使用form.my_component即可。

2. 创建全局的my_component_tag Helper #

要实现不依赖form对象的my_component_tag，在application_helper.rb中添加全局方法：

# app/helpers/application_helper.rb
def my_component_tag(attribute_name, label:, helper_text: nil)
  # 调用partial，传入nil作为form参数（需要修改partial兼容无form的情况）
  render(
    partial: "partials/my_component",
    locals: {
      form: nil,
      name: attribute_name,
      label: label,
      helper_text: helper_text
    }
  ).html_safe
end

3. 修改Partial兼容两种调用场景 #

原来的Partial依赖form对象，需要修改为兼容无form的情况：

# views/partials/_my_component.html.erb
<% helper_text = nil unless defined?(helper_text) %>
<div class="my_component">
  <div>
    <%= form ? form.label(name, label) : label_tag(name, label) %>
  </div>
  <div>
    <%= form ? form.text_field(name) : text_field_tag(name) %>
  </div>
  <% if helper_text %><div><%= helper_text %></div><% end %>
</div>

注意：修正调用语法 #

你示例中的调用语法有误，正确的写法应该去掉参数前的逗号：

<%= form_for @some_obj do |form| %>
  <%# 正确写法：无逗号 %>
  <%= form.my_component :some_attribute, label: "Some Attr:", helper_text: "Enter something valid here." %>
  <%= my_component_tag :some_attribute, label: "Some Attr:", helper_text: "Enter something valid here." %>
<% end %>

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