Mulitple Nested forms in same view?

[iangullo]

Hi, trying to embed two nested forms in the same view (tags and pictures).

Is that a possible thing to with this component as it is today?

[iangullo]

I understand this feature will be merged from the live pull-request:

#5

[ferrisoxide]

@iangullo It appears that you can do this with stimulus-rails-nested-form as it stands now. If you move data: { controller: 'nested-form', nested_form_wrapper_selector_value: '.nested-form-wrapper' } out of the call to form_with and put the equivalent in a <div> (wrapping the template, nested fields, etc), you can set up multiple nested forms - each one wrapped in it's own div.

Per the example in the docs:

<%= form_with model: @user do |f| %>
  <div data-controller="nested-form" data-nested-form-wrapper-selector-value=".nested-form-wrapper">
    <template data-nested-form-target="template">
      <%= f.fields_for :todos, Todo.new, child_index: 'NEW_RECORD' do |todo_fields| %>
        <%= render "todo_form", f: todo_fields %>
      <% end %>
    </template>

    <%= f.fields_for :todos do |todo_fields| %>
      <%= render "todo_form", f: todo_fields %>
    <% end %>

    <div data-nested-form-target="target"></div>

    <button type="button" data-action="nested-form#add">
      Add todo
    </button>
  </div>

Or something like that. Maybe I've misunderstood the problem, but it seems to be working for me.

[brodyhoskins]

@ferrisoxide I don't have time to test at the moment, but without the PR I was unable to do something like this (which is what I believe this issue was getting at):

<%= form_with model: @post do |f| %>
  <div data-controller="nested-form" data-nested-form-wrapper-selector-value=".pictures-form-wrapper">
    <template data-nested-form-target="template">
      <%= f.fields_for :picture, Picture.new, child_index: 'NEW_RECORD' do |picture_form| %>
        <%= render 'picture_form', f: picture_form %>
      <% end %>
    </template>
  
    <%= f.fields_for :shipment_broker_accessorials do |picture_form| %>
      <%= render 'picture_form', f: picture_form %>
    <% end %>
  
    <div data-nested-form-target="target"></div>
  
    <%= link_to 'Add', '#', data: { action: 'nested-form#add' } %>
  </div>
  
  <div data-controller="nested-form" data-nested-form-wrapper-selector-value=".tags-form-wrapper">
    <template data-nested-form-target="template">
      <%= f.fields_for :tag, Tag.new, child_index: 'NEW_RECORD' do |tag_form| %>
        <%= render 'tag_form', f: tag_form %>
      <% end %>
    </template>
  
    <%= f.fields_for :shipment_broker_accessorials do |tag_form| %>
      <%= render 'tag_form', f: tag_form %>
    <% end %>
  
    <div data-nested-form-target="target"></div>
  
    <%= link_to 'Add', '#', data: { action: 'nested-form#add' } %>
  </div>
<% end %>

[ferrisoxide]

Ah, I didn't distinguish between the selector-value data attributes. Both of my nested forms have a div wrapper that looks like this:

<div data-controller='nested-form', data-nested-form-wrapper-selector-value='.nested-form-wrapper'>

Not sure why, but it's working fine with two sets of nested form in the same form. 🤷

[agamstawn]

tag_form

Hi bro @brodyhoskins , may I see your 'tag_form' or 'picture_form' files? I have a problem with the button remove in the nested form

[brodyhoskins]

@agamstawn Sure, it looks like:

<div class="tag-form-wrapper row gy-2 gx-3 align-items-center mb-4" data-new-record="<%= f.object.new_record? %>">
  <div class="col col-sm-4">
    <div class="input-group">
      <%= f.text_field :name, wrapper: false %>
    </div>
  </div>

  <div class="col-auto">
    <%= f.hidden_field :_destroy, wrapper: false %>
    <%= link_to icon('solid', 'trash', 'Remove'), '#', data: { action: 'nested-form#remove' }, class: 'btn btn-light ml-2' %>
  </div>
</div>

[jbedworth]

I'm trying to add 2 nested-form's to my app, and the problem I'm having now is that the 2nd link_to 'Add' data: {action: 'nested-form#add' } just adds to the first nested-form. How would this work if both instances of nested-form-controller have the same name/id?