如何在Turbo Stream视图中清除文本字段并访问表单对象

方法一：在后端控制器中传递表单对象 #

要在Turbo Stream视图里使用表单对象，首先需要在reset动作中实例化对应的模型对象并传递给视图：

1. 修改MyController的reset方法，确保模型对象可用：

class MyController < ApplicationController
  def reset
    # 根据业务场景获取或初始化模型实例
    # 编辑场景用ID查找，新建场景用 MyModel.new
    @my_model = MyModel.find(params[:id])

    # 清除目标字段的值（无需持久化可跳过save）
    @my_model.my_field = nil
    # @my_model.save! # 如需同步到数据库则取消注释

    respond_to do |format|
      format.turbo_stream
    end
  end
end

2. 在reset.turbo_stream.erb视图中使用该对象渲染字段：

<%= turbo_stream.replace "my_field" do %>
  <%= form_with(model: @my_model) do |form| %>
    <%= form.text_field :my_field, class: "...", readonly: true, placeholder: "let's type" %>
  <% end %>
<% end %>

如果不想重新渲染整个表单，也可以直接用text_field_tag生成字段，确保ID与原字段一致：

<%= turbo_stream.replace "my_field" do %>
  <%= text_field_tag "my_model[my_field]", nil, 
      class: "...", 
      readonly: true, 
      placeholder: "let's type", 
      id: "my_field" %>
<% end %>

方法二：直接用Stimulus前端清除值（更高效） #

如果仅需前端清除字段值，无需后端持久化，可以跳过后端请求，直接在Stimulus控制器中操作DOM：

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  click(event) {
    const targetField = this.element.querySelector("#my_field")
    if (targetField) {
      targetField.value = ""
    }
  }
}

这种方式无需后端接口和Turbo Stream，响应更快，适合不需要同步数据库的场景。

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