Rails & Stimulus для динамических форм вложенных атрибутов

Question

там я возвращаюсь к Rails после многих лет использования его только для API. Появилось много нового, и я пытаюсь понять, как добиться чего-то с помощью новых фреймворков. Один из примеров - создание формы с accept_nested_attributes и добавление динамических has_many ассоциации.

у меня есть Company модель и Partner модели.

      class Company < ApplicationRecord
  # ... name, size, registration_type, etc
  has_many :partners, dependent: :destroy
  accepted_nested_attributes_for :partners
end

class Partner < ApplicationRecord
  # ... name, email, phone
  belong_to :company
end

В моей форме есть:

      <%= form_with(model: company) do |form} %>
  <!-- ... -->

  <div class="hidden" data-company-form-target="partnersForm">
    <%= form.fields_for :partners, company.partners do |partner_form| %>
      <div data-company-form-target="partnerFormInner">
        <div class="form-group">
          <div>
            <%= partner_form.label :name, "Name" %>
            <%= partner_form.text_field :name %>
          </div>

          <div>
            <%= partner_form.label :email, "Email" %>
            <%= partner_form.text_field :email %>
          </div>

          <div>
            <%= partner_form.label :phone_number, "Phone Number" %>
            <%= partner_form.text_field :phone_number %>
          </div>
        </div>
      </div>
    <% end %>
    <div>
      <button data-action="click->company-form#addPartner">
        +
      </button>
    </div>
  </div>
<% end %>

У меня есть контроллер js, который использует кнопку для добавления новой строки в форму для добавления дополнительных партнеров:

      import { Controller } from "stimulus";

export default class extends Controller {
  static targets = [ "partnerFormInner" ]

  addPartner(e) {
    e.preventDefault(); e.stopPropagation();

    this.partnerFormInnerTarget.insertAdjacentHTML('beforeend', this.formTemplate)

    this.count++
  }

  connect() {
    this.count = 1
  }

  get formTemplate() {
    return `<div>
    <div>
      <label for="company_partners_attributes_${this.count}_name">Name</label>
      <input type="text" name="company[partners_attributes][${this.count}][name]" id="company_partners_attributes_${this.count}_name">
    </div>

    <div>
      <label for="company_partners_attributes_${this.count}_email">Email</label>
      <input type="text" email="company[partners_attributes][${this.count}][email]" id="company_partners_attributes_${this.count}_email">
    </div>

    <div>
      <label for="company_partners_attributes_${this.count}_phone_number">Phone Number</label>
      <input type="text" phone_number="company[partners_attributes][${this.count}][phone_number]" id="company_partners_attributes_${this.count}_phone_number">
    </div>
  </div>`
  }
}

Теперь все работает нормально, однако я чувствую, что контроллер js немного взломан, копируя вывод HTML от одного партнера и вставляя его в свой контроллер с некоторой интерполяцией ... Я чувствую, что, вероятно, у меня есть какой-то способ получить этот шаблон прямо из бэкэнда Rails, так что у меня все это определено в одном месте частично или что-то в этом роде, но я не уверен, как соединить эти точки.

Есть ли способ переместить партнерскую форму в частичное и динамически вытягивать код для следующей строки в форме и вставить его через JS, или мне нужно просто продолжать делать то, что я делаю, с копированием / вставкой?

Answer 1

В вашем контроллере стимулов вместо копирования HTML вы можете использовать регулярное выражение для замены входной строки и использовать текущее время для идентификации добавленного поля. Для простоты:

      this.partnerFormInnerTarget.innerHTML.replace(/RECORD_PATTERN/g, new Date().getTime())

Вы можете использовать или читать этот драгоценный камень. https://github.com/hungle00/rondo_form
Это простой драгоценный камень, который я создал для обработки динамических вложенных форм с помощью Stimulus JS.

Answer 2

вам нужно использовать вложенную форму Stimulus Rails, это поможет вам на лету создавать новые поля для заполнения ваших отношений Rails с помощью Accepts_nested_attributes_for. пользовательский bin/rails pin стимул-рельсы-вложенная форма

добавить расширенный контроллер

      import NestedForm from 'stimulus-rails-nested-form'
    export default class extends NestedForm {
      connect() {
        super.connect()
        console.log('Do what you want here.')
      }
    }

подробнее о вложенной форме стимула