A lightweight plugin to prevent losing data when editing forms. No dependencies.
It supports Trix editor and Turbolinks 5.
You can get it via npm
:
npm install dirty-form --save
Or yarn
:
yarn add dirty-form
import DirtyForm from 'dirty-form'
let form = document.querySelector('#form')
new DirtyForm(form)
If you want to customize the message:
new DirtyForm(form, {
message: 'You have unsaved changes. Are you sure you want to leave?',
})
<%= form_with url: posts_path, html: { data: { controller: 'dirty-form' } } do |form| %>
<%= form.text_field :title %>
<% end %>
// dirty_form_controller.js
import { Controller } from 'stimulus'
import DirtyForm from 'dirty-form'
export default class extends Controller {
connect() {
new DirtyForm(this.element)
}
}