如何配置表单清除按钮或自定义流程以保留hidden fields初始值？

你遇到的hidden字段被清空的问题，本质是多数UI组件库封装的表单重置方法未区分普通可编辑字段与hidden字段，会全量将所有字段恢复为表单初始化时的取值，如果你的hidden字段是表单初始化完成后动态赋值的，就会被重置为空，可通过以下两种路径解决：

方案1：调整表单初始值配置（改动最小） #

如果你的hidden字段取值是表单渲染前就可以确定的，直接在表单初始化阶段将hidden字段的取值传入初始值配置即可：

• Ant Design 可在 useForm 钩子的 initialValues 参数中传入所有hidden字段的固定值
• Element UI 可在 el-form 组件的 :model 绑定对象初始化时就给所有hidden字段赋值
  配置完成后直接调用框架自带的重置方法，hidden字段会恢复为你预设的初始值，不会被清空。

方案2：自定义重置逻辑（适配动态赋值的hidden字段） #

如果你的hidden字段是表单渲染后动态赋值的，不要调用框架自带的全量重置方法，自己实现重置逻辑，跳过需要保留的hidden字段即可，示例代码如下：

// Vue + Element UI 示例
function customFormReset() {
  // 填入所有需要保留的hidden字段名
  const reservedHiddenFields = ['init_user_id', 'form_source_id', 'create_timestamp']
  // 遍历表单绑定的数据对象
  Object.keys(formData).forEach(fieldKey => {
    // 仅重置非保留字段
    if (!reservedHiddenFields.includes(fieldKey)) {
      formData[fieldKey] = ''
    }
  })
  // 可选：清除表单校验提示状态
  this.$refs.formRef.clearValidate()
}

// 原生HTML表单示例
document.querySelector('#customResetBtn').addEventListener('click', () => {
  const targetForm = document.querySelector('#yourFormId')
  Array.from(targetForm.elements).forEach(el => {
    // 跳过hidden类型字段
    if (el.type !== 'hidden' && el.name) {
      el.value = el.defaultValue
      // 兼容复选框、单选框的重置
      if (el.type === 'checkbox' || el.type === 'radio') {
        el.checked = el.defaultChecked
      }
    }
  })
})

将原清除按钮的点击事件绑定到上述自定义方法即可，无需修改提交逻辑，hidden字段的取值会全程保留，CRUD API提交时可以拿到完整数据。

内容的提问来源于stack exchange，提问作者Yax