Stimulus中DOM目标增删触发事件及多页表单按钮动态控制问题

问题分析 #

你的场景中contactNameTargetConnected回调未触发，原因是Stimulus控制器挂载在<body>上，而表单字段是Turbo Frame动态加载的内容。Stimulus的target连接回调仅在控制器初始化时检测已存在的DOM元素，动态插入的target不会自动触发该回调。同时，页面切换时需要重新检测当前页字段状态来控制按钮。

解决方案 #

1. 调整页面结构（添加按钮target） #

确保Next按钮有对应的Stimulus target，方便控制器操作：

<body data-controller="next-button">
  <main>
    <%= turbo_frame_tag :main do %>
      <%= yield %>
    <% end %>
  </main>
  <%= render partial: 'application/progress_bar' %>
  <!-- 添加Next按钮的target -->
  <button data-target="next-button.nextBtn" disabled>Next</button>
</body>

2. 表单字段添加输入事件监听 #

给每个页的必填字段绑定input事件，触发字段检查逻辑：

<!-- 第一页字段 -->
<%= form.text_field :name, data: { 
  target: "next-button.contactName", 
  action: "input->next-button#checkFields" 
} %>

<!-- 第二页字段（示例） -->
<%= form.email_field :email, data: { 
  target: "next-button.email", 
  action: "input->next-button#checkFields" 
} %>

3. 修改Stimulus控制器 #

通过监听Turbo Frame加载事件，结合target存在性判断，动态控制按钮状态：

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ['nextBtn', 'contactName', 'email']

  connect() {
    // 监听Turbo Frame加载完成事件，页面切换时重新检查字段
    document.addEventListener('turbo:frame-load', (event) => {
      if (event.target.id === 'main') {
        this.checkFields()
      }
    })
    // 页面初始加载时执行一次检查
    this.checkFields()
  }

  checkFields() {
    // 默认禁用按钮
    this.nextBtnTarget.disabled = true

    // 根据当前存在的target判断页面，执行对应检查
    if (this.hasContactNameTarget) {
      // 第一页：检查姓名字段非空
      if (this.contactNameTarget.value.trim() !== '') {
        this.nextBtnTarget.disabled = false
      }
    } else if (this.hasEmailTarget) {
      // 第二页：检查邮箱字段非空（可扩展多个字段的逻辑）
      if (this.emailTarget.value.trim() !== '') {
        this.nextBtnTarget.disabled = false
      }
    }
    // 更多页面可继续添加else if分支
  }
}

核心逻辑说明 #

• 利用Turbo的turbo:frame-load事件，在页面切换（Frame内容更新）时重新执行字段检查。
• 通过has[TargetName]Target属性判断当前页是否存在对应字段，从而区分不同页面的校验规则。
• 绑定input事件实现实时校验，用户输入时立即更新按钮状态。

内容的提问来源于stack exchange，提问作者APysnack