Sharing object with child components

[scottwater]

I am trying to build a couple of components that will simply building repetitive forms.

I started with just the individual fields:

<%= form_with(model: @product) do |f| %>
  <%= render(TextFieldComponent.new(form: f, name: :name, label: "Name"))%>
<% end %>

However, I found I still had a lot of boilerplate form set up (title, description, layers of divs, etc), so I was trying to wrap that up in a parent/container form:

I have something that looks like this:

<%= render(FormComponent.new(model: @product, title: "Product", description: "HEY!")) do |component| %>
  <%= render(TextFieldComponent.new(form:????, name: :name, label: "Name"))%>
  <%= render(TextAreaComponent.new(form: ????, name: :description, label: "Description", rows: 8, helper: "Write something"))%>
<% end %>

I have hit a road block trying to figure out how to share the "form_with" from my parent component with the child components (or if that is even a good idea).

Any suggestions on how to move forward?

Thanks

[pinzonjulian]

Hey! I think that by doing this, you're swimming against the current. Rails already does an amazing job at handling forms and its rendering.

To use components in forms, approach it from the opposite perspective: how do you enhance form helpers to use your components underneath?

The answer is FormBuilders
https://guides.rubyonrails.org/form_helpers.html#customizing-form-builders
https://api.rubyonrails.org/v6.0.3.4/classes/ActionView/Helpers/FormBuilder.html

Using form builders you can:

1. Modify rails' default form helpers with your own markup and css classes
2. Add new helpers to support new type of input elements you create.

You can either override the default rails form builder:

class FormBuilder <  ActionView::Helpers::FormBuilder
  def text_field(...)
    # this will override rails' default text_field
  end
end

Or create your own and specify which controllers or forms should use it

module YourApp # Or any name
  class FormBuilder < ActionView::Helpers::FormBuilder
    def chip_selector(args)
        # this will add a new chip_selector helper for your forms
        # e.g. f.chip_selector :tag_id (if you had a tag model for example)
       YourChipSelectorComponent.new(...)
    end
  end
end