How to create a Component that uses form_with

[mtayllan]

I'm gradually migrating my views to Phlex, but I'm stuck on this problem with the form_with helper.

My current erb template is:

<%= form_with url: "sample_url", method: :post do |f| %>
  using form_with
  <div class="grid gap-2">
    <div class="grid gap-1">
      <%= f.label :email %>
      <%= f.text_field :email %>
    </div>
    <div class="grid gap-1">
      <%= f.label :password %>
      <%= f.password_field :password %>
    </div>
  </div>
<% end %>

I trying to change only the form_with to a component

<%= render FormComponent.new(url: "sample_url", method: :post) do |f| %>
  using FormComponent
  <div class="grid gap-2">
    <div class="grid gap-1">
      <%= f.label :email %>
      <%= f.text_field :email %>
    </div>
    <div class="grid gap-1">
      <%= f.label :password %>
      <%= f.password_field :password %>
    </div>
  </div>
<% end %>

Here is the FormComponent class

class FormComponent < ApplicationComponent
  include Phlex::Rails::Helpers::FormWith

  def initialize(url:, method: :post)
    @url = url
    @method = method
  end

  def view_template(&block)
    form_with(url: @url, method: @method) do |f|
      yield(f)
    end
  end
end

The output for both:

The content that is not a method call using the f object is being ignored. What am I doing wrong?

[ccrisc]

Have you tried to define in the Form Component class the block component?

I would try the following:

  def view_template(&block)
    form_with(url: @url, method: @method) do |f|
      @f = f
      instance_exec(f, &block)
    end
  end

  def label(attribute)
    @f.label(attribute)
  end

  def text_field(attribute)
    @f.text_field(attribute)
  end

  def password_field(attribute)
    @f.password_field(attribute)
  end