Stimulus useDirtyFormTracking：表单提交后如何更新data-detect-dirty-load-value

使用stimulus-library的useDirtyFormTracking追踪表单脏状态时，表单提交后调用reset()方法无法更新字段的data-detect-dirty-load-value属性，导致后续判断表单是否为脏数据时仍使用初始加载值。

现有控制器代码 #

import { Controller } from '@hotwired/stimulus';
import { useDirtyFormTracking } from "stimulus-library";

export default class extends Controller {
  connect() {
    useDirtyFormTracking(this, this.element);
    this.element.addEventListener("form-dirtied", this.#onFormDirtied);
    this.element.addEventListener("form-cleaned", this.#onFormCleaned);
  }

  #onFormDirtied = (event) => {
    // show save button
  }

  #onFormCleaned = () => {
    // hide save button
  }

  // called after form submission to reset the form
  // & pass the new saved values to every field inside the form (should update data-detect-dirty-load-value)
  reset() {
    this.#onFormCleaned();
    // i don't know if there's a better way to reset the form and input fields after form submission
    this.element.removeAttribute("data-dirty");

    const dirtyInputs = this.element.querySelectorAll("[data-dirty]");
    dirtyInputs.forEach((el) => el.removeAttribute("data-dirty"));
  }
}

解决方案 #

核心是手动更新每个表单字段的data-detect-dirty-load-value属性为提交后的当前值，同时处理不同类型字段的取值逻辑：

修改后的reset()方法：

reset() {
  this.#onFormCleaned();
  // 移除表单的脏状态标记
  this.element.removeAttribute("data-dirty");

  // 遍历所有表单字段，更新初始加载值
  const formFields = this.element.querySelectorAll('input, select, textarea');
  formFields.forEach(field => {
    // 移除字段的脏状态标记
    field.removeAttribute("data-dirty");
    
    // 根据字段类型获取当前值
    let currentValue;
    if (field.type === 'checkbox' || field.type === 'radio') {
      currentValue = field.checked;
    } else {
      currentValue = field.value;
    }
    
    // 更新初始加载值属性
    field.setAttribute('data-detect-dirty-load-value', currentValue);
  });
}

补充说明

• 针对复选框、单选框这类特殊字段，需要通过checked属性获取状态，而非value
• 更新data-detect-dirty-load-value后，后续的脏状态判断会以新的初始值为基准
• 若stimulus-library提供了官方的重置方法（如resetDirtyState），建议优先使用官方方法，避免手动操作属性的兼容性问题

内容的提问来源于stack exchange，提问作者aldrien.h