ruby - multiple dynamic nested form fields in the same form

Question

I have a registration form that allows tournament directors to select which fields they will request when participants register for a tournament. I followed a video on Go Rails to add dynamic nested form fields into a form using stimulus JS and it works great.

I am trying to add a second group of fields in another section fo the form. the form is broken into section, basic info, contact info, competition info, etc and I would like to have the ability to add custom fields to each section.

In the basic section it works great. I can add and remove custom fields, but when I added it to the contact section, even with change nested-form to nested-contacts, it just puls in the fields I create in the basic section. I can add and remvoe from either section but it just shows them all in both sections.

Here is my form as it is now. I still have to add the other sections but was trying to get basic and contact custom fields working before adding the rest of the form:

<h4>Athlete Information</h4>
<%= form_with(model: @event, class: "shadow p-3 mb-3 rounded text-dark", local: true) do |f| %>
  <%= f.hidden_field :athlete_info_complete, value: 1 %>
  <%= f.hidden_field :next, value: 6 %>
  <div class="row club_container">
    <div class="col-12">
      <legend>
        Check all the boxes next to the information you would like to
        request from your tournament participants.  Each area will have an option 
        to add custom fields.
      </legend>
      <br><br>
      <h4>Basic Information</h4>
      <div class="form-group row">
        <div class="col-md-9 col-sm-12">
          <label class="main">First Name
            <%= f.check_box :first_name %>
            <span class="w3docs"></span>
          </label>
          <label class="main">Last Name
            <%= f.check_box :last_name %>
            <span class="w3docs"></span>
          </label>
          <label class="main">Date of birth
            <%= f.check_box :dob %>
            <span class="w3docs"></span>
          </label>
        </div>
      </div>
      <h4>Custom Fields</h4>
      <small>
        Enter the name of your custom field you plan to offer.
      </small>
      <br><br>
      
      <div data-controller="nested-form">
        <template data-target="nested-form.template">
          <%= f.fields_for :fields, Field.new, child_index: 'NEW_RECORD' do |field| %>
            <%= render 'events/forms/custom_fields_basic', f: field %>
          <% end %>
        </template>
        
        <%= f.fields_for :fields do |field| %>
          <%= render 'events/forms/custom_fields_basic', f: field %>
        <% end %>
        <div class="mb-3" data-target="nested-form.links">
          <%= link_to 'Add Custom Field', "#", class: "btn btn-outline-dark", data: { action: "click->nested-form#add_association" } %>
        </div>
      </div>

      <h4>Contact Information</h4>
      <div class="form-group row">
        <div class="col-md-9 col-sm-12">
          <label class="main">Address 1
            <%= f.check_box :address1 %>
            <span class="w3docs"></span>
          </label>
          <label class="main">Address 2
            <%= f.check_box :address2 %>
            <span class="w3docs"></span>
          </label>
          <label class="main">City
            <%= f.check_box :city %>
            <span class="w3docs"></span>
          </label>
        </div>
      </div>

      <div data-controller="nested-contacts">
        <template data-target="nested-contacts.template">
          <%= f.fields_for :fields, Field.new, child_index: 'NEW_RECORD' do |field| %>
            <%= render 'events/forms/custom_fields_contact', f: field %>
          <% end %>
        </template>
        
        <%= f.fields_for :fields do |field| %>
          <%= render 'events/forms/custom_fields_contact', f: field %>
        <% end %>
        <div class="mb-3" data-target="nested-contacts.links">
          <%= link_to 'Add Custom Field', "#", class: "btn btn-outline-dark", data: { action: "click->nested-contacts#add_association" } %>
        </div>
      </div>
      
      <div class="form-group row">
        <div class="col-md-9 col-sm-12"></div>
        <div class="col-md-3 col-sm-12">
          <button id="button_next" class="profile_btn align-middle" style="width:180px;">Finalize <span style="margin-top: 5px; font-size: 18px;"><i class="fas fa-long-arrow-alt-right"></i></span></button>
        </div>
      </div>
    </div>
  </div>
<% end %>

Here is the _custom_fields_basic.html.erb

<%= content_tag :div, class: 'nested-fields', data: { new_record: f.object.new_record? }  do %>
  <div class="form-group row">
    <div class="col-md-3 col-sm-12 col-form-label">
      <%= f.label :field_name %>
    </div>
    <div class="col-md-9 col-sm-12">
      <%= f.text_field :name, class: 'form-control' %>
      <small><%= link_to 'Remove', '#', data: { action: 'click->nested-form#remove_association' } %></small>
    </div>
  </div>
  <%= f.hidden_field :field_type, value: 'basic' %>
  <%= f.hidden_field :_destroy %>
<% end %>

This is the custom_fields_contact.html.erb file:

<%= content_tag :div, class: 'nested-contacts', data: { new_record: f.object.new_record? }  do %>
  <div class="form-group row">
    <div class="col-md-3 col-sm-12 col-form-label">
      <%= f.label :field_name %>
    </div>
    <div class="col-md-9 col-sm-12">
      <%= f.text_field :name, class: 'form-control' %>
      <small><%= link_to 'Remove', '#', data: { action: 'click->nested-contacts#remove_association' } %></small>
    </div>
  </div>
  <%= f.hidden_field :field_type, value: 'contact' %>
  <%= f.hidden_field :_destroy %>
<% end %>

Here is the nexted_form_controller.js

import { Controller } from "stimulus"

export default class extends Controller {
  static targets = [ "links", "template" ]

  connect() {
    
  }

  add_association(event) {
    event.preventDefault()

    var content = this.templateTarget.innerHTML.replace(/NEW_RECORD/g, new Date().getTime())
    this.linksTarget.insertAdjacentHTML('beforebegin', content)
  }
  
  remove_association(event) {
    event.preventDefault()

    let wrapper = event.target.closest(".nested-fields")
    if (wrapper.dataset.newRecord == "true") {
      wrapper.remove()
    } else {
      wrapper.querySelector("input[name*='_destroy']").value = 1
      wrapper.style.display = 'none'
    } 
  }
}

And the nested_contacts_controller.js:

import { Controller } from "stimulus"

export default class extends Controller {
  static targets = [ "links", "template" ]

  connect() {
    
  }

  add_association(event) {
    event.preventDefault()

    var content = this.templateTarget.innerHTML.replace(/NEW_RECORD/g, new Date().getTime())
    this.linksTarget.insertAdjacentHTML('beforebegin', content)
  }
  
  remove_association(event) {
    event.preventDefault()

    let wrapper = event.target.closest(".nested-contacts")
    if (wrapper.dataset.newRecord == "true") {
      wrapper.remove()
    } else {
      wrapper.querySelector("input[name*='_destroy']").value = 1
      wrapper.style.display = 'none'
    } 
  }
}

If there is way to do it with a single controller that would be great, but I'm ok with having separate controllers for each section if necessary.

Thanks

question from:https://stackoverflow.com/questions/65910940/multiple-dynamic-nested-form-fields-in-the-same-form

Answer 1

Your problem is not with the Stimulus controllers, it is with how you are defining these fields. One thing to note, though, is Stimulus is meant to be modular, so you only need one controller and can implement it as many times as you want on the same page. The purpose of the data-controller is to define what part of the DOM the controller can affect.

# form
<div data-controller="nested-form">
  Affects only things in here
</div>

<div data-controller="nested-form">
  Affects only things in here
</div>

The issue is that you're using the same associated model in two places. When the edit page is rendered, the form is going to display all the fields in each section because you're asking it to with these lines

<%= f.fields_for :fields do |field| %> #specifically this one
  <%= render 'events/forms/custom_fields_basic', f: field %>
<% end %>

That calls all the associated models associated with the Event and displays the fields for them.

You have the hidden field for field_type so now you just need to define some methods in the Event model.

# model
def basic_fields
  self.fields.where('field_type = ?', 'basic')
end

Now, instead of <%= f.fields_for :fields do |field| %>, you then do <%= f.fields_for :basic_fields do |field| %> and so forth.