Как очистить форму после отправки в рельсах, используя (стимул) hotwire?

Question

У меня есть форма, которая создает новый пост, и контроллер стимулов, который очищает поля ввода после отправки. Однако он делает это до того, как входные значения достигают моего контроллера 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>

Все работает отлично, за исключением того, что создается пустой пост (у меня нет проверок), потому что мои поля ввода очищаются Js до того, как они достигают моего контроллера Rails.

Я огляделся и нашел этот пост, но не знаю, что делать.Как очистить текстовую область после запроса формы «ajax» с помощью 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 %>

Или вы можете попробовать это (запуск действия при турбо-отправке):

Попробуйте 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>