Stimulus nested form controller

Credit goes to GoRails.com and DriftingRuby

Installation

This assumes StimulusJS is already installed.

1. Add package yarn add stimulus-nested-form
2. Import package in your application

import NestedForm from "stimulus-nested-form"
application.register("nested-form", NestedForm)

Example

<div data-controller="nested-form">
  <template data-nested-form-target="template">
    <%= f.fields_for :options, ProductOption.new, child_index: "NEW_RECORD" do |ff| %>
      <%= render "product_options/option_fields", field: ff %>
    <% end %>
  </template>

  <%= f.fields_for :options do |ff| %>
    <%= render "product_options/option_fields", field: ff %>
  <% end %>
  <p data-nested-form-target="links">
    <%= link_to t("product_option.add"), "#",
        class: "btn btn-link",
        data: { action: "click->nested-form#add_association" } %>
  </p>
</div>

<!-- product_options/_option_fields.html.erb -->
<%= tag.div class: 'nested-fields', data: { new_record: field.object.new_record? } do %>
  <div class='row'>
    <div class='col-md-6'><%= field.input :name %></div>
    <div class='col-md-2 d-flex align-items-center'>
      <%= link_to t('product_option.remove'), '#', data: { action: 'click->nested-form#remove_association' }, class: 'text-danger' %>
    </div>
  </div>
  <%= field.hidden_field :_destroy %>
<% end %>

Publish new version

Install Microbundle if not present yet npm -g install microbundle

1. Run yarn build
2. Update CHANGELOG.md
3. Run yarn publish