如何使用（刺激）热线在 rails 中提交后清除表单？

Question

我有一个创建新 post 的表单，以及一个在提交后清除输入字段的刺激控制器。但是，它会在输入值到达我的 rails 控制器之前执行此操作。

这是我的form_controller.js

import { Controller } from "@hotwired/stimulus"

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

我的表格：

<turbo-frame id='<%= id %>'>
  <%= form_with model: post, data: { controller: :form } do |f| %>
    Title: <%= f.text_field :title %>
    Body: <%= f.text_area :body %>
    <%= f.submit data: {action: 'form#clear'} %>
<% end %>
</turbo-frame>

一切正常，只是创建了一个空的 post（我没有验证）因为我的输入字段之前被 Js 擦干净了他们到达了我的 Rails 控制器。

我确实环顾四周并找到了这个 post 但真的不知道该怎么做。 How to clear a text area after an "ajax" form request with ruby on rails

Answer 1

事件在点击提交按钮时执行，而不是在表单提交时尝试运行。没有测试代码，但你可能想做这样的事情：

尝试 1:

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {

  connect() {
    this.element.addEventListener("submit", clear);
  }

  clear() {
    this.element.reset()
  }
}

并从提交按钮中删除操作：

<%= f.submit %>

或者您可以试试这个（运行 turbo 提交上的操作）：

尝试 2：

<turbo-frame id='<%= id %>'>
  <%= form_with model: post, data: { controller: :form, action: "turbo:submit-end->form#clear" } do |f| %>
    Title: <%= f.text_field :title %>
    Body: <%= f.text_area :body %>
    <%= f.submit %>
  <% end %>
</turbo-frame>

如何使用（刺激）热线在 rails 中提交后清除表单？

How to clear form after submission in rails using (stimulus) hotwire?

ruby-on-rails

turbo

hotwire