what is the right way to use Phlex for nested forms?

[wdiechmann]

I'm (still) banging my head on the fields_for issue of late - and am wondering whether you guys have cracked this one?

form_with resource do | form |
  form.text_field :some_field
  form.fields_for :association do | association_form |
    association_form.text_field :some_other_field
    form.text_field :yet_another_field
  end
  form.text_field :some_final_field
end

I'd like this to render in the order listed:

<form>
  <input type="text" name="resource[some_field]" />
  <input type="text" name="resource[association][some_other_field]" />  
  <input type="text" name="resource[yet_another_field]" />
  <input type="text" name="resource[some_final_field]" />
</form>

Context:

I've built every "component" as a separate class and call them from the form class - partially shown here:

module Views
  class Components::Form::Form < Phlex::HTML
    include Phlex::Rails::Helpers::FormWith
    include Phlex::Rails::Helpers::FieldsFor

    def initialize( resource, &block )
      @resource = resource
      @form = nil
    end

    def template(&)
      form_with( model: @resource, 
        url: helpers.resource_url(), 
        id: helpers.resource_form, 
        enctype: "multipart/form-data",
        data: { form_sleeve_target: 'form' } ) do |form|
          @form = form
          yield
        end
      end
    end

    def fields_for(*args, **kwargs)
      # save the current value of @form. We'll need it later.
      original_form = @rails_form_builder
      
      begin
        @form.fields_for(*args, **kwargs) do |f|
          @form = f
          yield
        end
      ensure
        # set the form back to the original form before scoping it
        @form = original_form
      end
    end

    def text_field(**attribs, &block)
      attribs[:form] = @rails_form_builder
      render Views::Components::Form::TextField.new **attribs, &block
    end

  end
end

# views/components/form/text_field.rb
module Views
  class Components::Form::TextField < Phlex::HTML
    include Phlex::Rails::Helpers::Label
    include Phlex::Rails::Helpers::TextField

    def initialize( resource: nil, form: nil, field: nil)
      @resource = resource
      @form = form
      @field = field
    end

    def template()
      @form.label( @field )
      @form.text_field( @field )
    end
  end
end

[wdiechmann]

Newsflash!

I believe to have "conquered" this in a pretty simple way

# views/users/_form.html.erb
<%= render_form( resource: resource, assoc: :participantable ) do |form| %> 

  <%= render_form_header( resource: resource, title: form_header_title, description: form_header_description ) %>
  <%= render_form_errors(resource: resource) if resource.errors.size > 0 %>

  <!-- Divider container -->
  <div class="h-full py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200">

    <!-- Name -->
    <%= form.text_field( :name, required: true, focus: true ) %>

    <%= form.text_field( :user_name, assoc: :participantable, required: true ) %>
    <%= form.email_field( :email, assoc: :participantable, required: true ) %>
---8<---

Then in my components, I've got a generic_field

module Views
  class Components::Form::GenericField < Phlex::HTML
    include Phlex::Rails::Helpers::Label

    def initialize(field, **attribs, &block)
      @resource = attribs[:resource] || nil
      @assoc = attribs[:assoc] || nil
      @field_input_id = "#{@resource.class.to_s.underscore}_#{@assoc}_#{@field_name}"
      @field_input_name = (@assoc.nil? ? "#{@resource.class.to_s.underscore}[#{@field_name}]" : "#{@resource.class.to_s.underscore}[#{@assoc}_attributes][#{@field_name}]") rescue @field_name.to_s
---8<---

and specializations for each input like

module Views
  #
  # the text_field component is a wrapper for the text_field form input field helper
  #
  class Components::Form::TextField < Views::Components::Form::GenericField
    include Phlex::Rails::Helpers::TextField

    # arguments: field, assoc: nil, title: nil, data: {}, required: false, focus: false, disabled: false, 
    # text_css: "", label_css: "", input_css: ""
    def initialize( field, **attribs, &block )
      @url = attribs[:url] || ""
      super( field, **attribs, &block )

      @text_classes = "space-y-1 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5 #{attribs[:text_css]}"
      @label_classes = "block text-sm font-medium text-gray-900 sm:mt-px sm:pt-2 #{attribs[:label_css]}"
      @input_classes = "block w-full shadow-sm sm:text-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md #{attribs[:input_css]}}"
    end

    def template(&)
      div class: @text_classes do
        label_for
        div( class: "sm:col-span-2") do
          text_field( @obj, @field, 
            id: @field_input_id,
            name: @field_input_name,
            value: @field_value,
            disabled: @disabled,
            autocomplete: @autocomplete,
            tabindex: @tabindex,
            required: @required, 
            data: @data,
            class: @input_classes) do |f|
              yield
            end
          div( class:"text-sm text-red-800" ) { @obj.errors.where(@field).map( &:full_message).join( "and ") }
        end
      end
    end
  end
end