app/components/avo/fields/array_of_field/edit_component.html.erb
<%= field_wrapper **field_wrapper_args, stacked: true, data: {} do %>
<%= content_tag :div, data: { controller: 'nested-form', nested_form_wrapper_selector_value: '.nested-form-wrapper' } do %>
<template data-nested-form-target="template">
<div class="nested-form-wrapper" data-new-record="true">
<%= a_link 'javascript:void(0);', icon: 'trash', color: :red, style: :text, data: {action: "click->nested-form#remove"} do %>
Remove <%= @field.name.singularize %>
<% end %>
<%= render field.template_member.component_for_view(view).new(field: field.template_member, form:, view:) %>
</div>
</template>
<% field.members.each do |f| %>
<div class="nested-form-wrapper" data-new-record="true">
<%= a_link 'javascript:void(0);', icon: 'trash', color: :red, style: :text, data: {action: "click->nested-form#remove"} do %>
Remove <%= @field.name.singularize %>
<% end %>
<%= render f.component_for_view(view).new(field: f, form:, view:) %>
<% if field.model && field.model.errors.include?(f.id) %>
<div class="text-red-600 mt-2 text-sm"><%= field.model.errors.messages_for(f.id).to_sentence %></div>
<% end %>
</div>
<% end %>
<div data-nested-form-target="target"></div>
<!-- Inserted elements will be injected before that target. -->
<%= a_link 'javascript:void(0);', icon: 'plus', color: :primary, style: :outline, data: {action: "click->nested-form#add"} do %>
Add another <%= @field.name.singularize %>
<% end %>
<% end %>
<% end %>