在热线中重置表单

Question

正如热线 the landing page 上的示例所提供的，表格清除过程对我来说是不透明的，也不起作用。

安装了 rails 7.0.1 运行 ruby 3.1。刺激控制器设置为：

import { Controller } from  "@hotwired/stimulus"      // "stimulus"

export default class extends Controller {
  reset() {
    this.element.reset()
  }
}

注意：DHH的例子只调用刺激，而railshello-controller.js预装的是指@hotwired/stimulus。尝试了两种 syntassi 都无济于事。

表单元素的结构如下：

  <%= turbo_frame_tag 'new_message', target: '_top' do %>
    <%= form_with(model: [ @message.room, @message ], data: { controller: "reset_form", action: "turbo:submit-end->reset_form#reset" } ) do |form| %>
        <%= form.text_field :content, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
        <%= form.submit 'send' %>
    <% end %>

我看到提交操作（实际上它的结尾）是连接。但这并没有发生，虽然新记录已创建并且 UI 按预期更新。

为什么会失败？应该如何解决？

Answer 1

控制器名为 reset_form_controller.js。

然而，这被错误地用下划线引用

data: { controller: "reset_form", action: "turbo:submit-end->reset_form#reset" }

当 reset form 应该带有破折号时

data: { controller: "reset-form", action: "turbo:submit-end->reset-form#reset" }```

在热线中重置表单

reset form in hotwire

hotwire-rails

ruby-on-rails-7