Rails 使用 Simple_form 嵌套表单将输入的值传递给另一个

如何解决Rails 使用 Simple_form 嵌套表单将输入的值传递给另一个

我的 rails 应用中有一个带有 simple_form 和 stimulusjs 的表单。此表单用于创建新订阅。

在这个表单中，我有 2 个使用 simple_fields_for 的嵌套表单。

第一个嵌套表单是一个 dummy_selector，它不会在我的数据库中保存任何数据。 这个虚拟选择器有一个包含 3 个选项的集合。 ["aniversary","cardinal","ordinal"]

第二个嵌套表单有几个输入，并将数据保存在数据库中。第一个输入是一个只有两个选项的集合 [“cardinal” “ordinal”].

如果用户点击第一个表单“周年纪念”，则不会发生任何变化，因为它是默认选项。

如果用户按下选项 cardinal ||第一种形式的序数。多亏了 Stimulus，第二种形式将客户想要的选项保存在 db 中。

这是有效的。

我面临的问题 100% 是可用性问题

假设我将 debit_date 设置为“cardinal” 我遇到的问题是，当我想更新表单并呈现页面时，dummy_selector 出现时没有我之前保存的选项。就可用性而言，它应该会出现。

我已经探测将 debit_date 关联的值传递给 dummy_selector 内的父对象 (base_plan)

<%= f.input :debit_date_dummy_selector,value: f.object.debit_date.date_type %>

如果我在 rails 控制台上测试这个，它会给我正确的选项。但它没有显示在视图中

我也尝试过使用选择器，它给了我我想要的选项，但破坏了其他功能。 （如果我想更改debit_date，则无需更新）

<%= f.input :debit_date_dummy_selector,selector: f.object.debit_date.date_type %>

这是我的 simple_form 代码

Simple_form

            <%= f.simple_fields_for :synthetic_data do |f| %>
              <%= f.input :debit_date_dummy_selector,include_blank: true,collection: debit_date_dummy_selector,input_html: {
                            "data-action": "input->hideable#replace
                                           input->hideable#toggleSelector
                                           input->hideable#check","data-hideable-target": "select replace","data-content-value": "aniversary","data-alternative-value": "cardinal","data-alternative-possible-value": "ordinal"
                                                     } %>
            <% end %>
            <%= f.simple_fields_for :debit_date do |debit_date|%>
              <div class="hidden" >
                <%= debit_date.input :date_type,collection: translate_base_plan_debit_date,input_html: {
                                      "data-hideable-target": "link","data-alternative-possible-value": "ordinal"
                                    } %>
              </div>
              <% if debit_date.object.persisted? %>
                  <div class="hidden" data-hideable-target= "input">
                    <%= debit_date.input :value %>
                  </div>
                <div class="hidden">
                  <%= debit_date.input :_destroy,as: :boolean,input_html: { "data-hideable-target": "check" } %>
                  <% debit_date.object.mark_for_destruction %>
                </div>
              <% else %>
                <div class="hidden" data-hideable-target= "input">
                  <%= debit_date.input :value %>
                </div>
              <% end %>
            <% end %>
          </div>

Stimulusjs 控制器

import { Controller } from "stimulus"

export default class extends Controller {
  static targets = [ "hideable","link","show","remove","select","disable","check","input" ]
  connect() {
    this.hideableTargets.forEach( (e) => {e.classList.add('hidden')});
    this.showTargets.forEach( (e) => {e.classList.remove('hidden')});
    this.removeTargets.forEach( (e) => {e.classList.add('hidden')});
  }

  basic_toggle() {
    this.hideableTargets.forEach( (e) => {e.classList.toggle('hidden')});
  }

  toggle() {
    this.basic_toggle()
    if (this.linkTarget.innerText == this.linkTarget.dataset.initialText) {
      this.linkTarget.innerText = this.linkTarget.dataset.alternativeText
    } else {
      this.linkTarget.innerText = this.linkTarget.dataset.initialText
    }
  }

  toggleSelector() {
    if (this.selectTarget.value == this.selectTarget.dataset.contentValue) {
      this.inputTarget.classList.add('hidden')
    } else {
      this.inputTarget.classList.remove('hidden')
    }
  }

  replace() {
    if (this.selectTarget.value == this.selectTarget.dataset.alternativeValue) {
      this.linkTarget.value = this.linkTarget.dataset.alternativeValue
    } else if (this.selectTarget.value == this.selectTarget.dataset.alternativePossibleValue ) {
      this.linkTarget.value = this.linkTarget.dataset.alternativePossibleValue
    }
  }

  check() {
    if (this.selectTarget.value == this.selectTarget.dataset.contentValue) {
      this.checkTarget.checked = true
    } else {
      this.checkTarget.checked = false
    }
  }

  disableCheckBox() {
    if (this.selectTarget.value == this.selectTarget.dataset.contentValue) {
      this.disableTarget.checked = false
      this.disableTarget.disabled = true
    } else {
      this.disableTarget.disabled = false
    }
  }

  disableinput() {
    if (this.selectTarget.value == this.selectTarget.dataset.contentValue) {
      this.disableTarget.disabled = false
    } else {
      this.disableTarget.disabled = true
    }
  }
}