Angular中如何保存FormGroup表单状态以便后续恢复

基础用法（仅保存恢复表单值） #

Angular的FormGroup原生提供了一次性获取所有控件值的属性value，恢复时使用patchValue方法即可批量赋值，无需逐个操作控件：

保存状态 #

你可以将拿到的表单值序列化后存储在localStorage/sessionStorage，或者应用全局状态中：

// 一次性获取所有控件值，得到结构和FormGroup定义一致的普通JS对象
const formValue = this.forms.value;
// 存储到本地存储，持久化保存未提交内容
localStorage.setItem('unsaved_form_state', JSON.stringify(formValue));

恢复状态 #

页面加载时读取存储的内容，直接传入patchValue即可一次性恢复所有控件的值：

const savedState = localStorage.getItem('unsaved_form_state');
if (savedState) {
  const parsedState = JSON.parse(savedState);
  // 批量赋值，支持部分字段传入，未传入的字段值不受影响
  this.forms.patchValue(parsedState);
}

如果确认需要完整覆盖所有控件值，也可以使用setValue方法，该方法要求传入的对象必须包含FormGroup定义的所有控件，缺少字段会抛出错误。

进阶用法（保存完整表单交互状态） #

如果需要同时恢复表单的交互状态（比如控件是否被触碰过touched、是否被修改过dirty、校验状态等），可以自定义存储结构，批量处理控件状态：

// 保存完整表单状态
function saveFormFullState(formGroup, storageKey = 'form_full_state') {
  const fullState = {
    value: formGroup.value,
    controlStates: Object.fromEntries(
      Object.keys(formGroup.controls).map(controlKey => {
        const control = formGroup.get(controlKey);
        return [controlKey, {
          touched: control.touched,
          dirty: control.dirty,
          valid: control.valid
        }]
      })
    )
  };
  localStorage.setItem(storageKey, JSON.stringify(fullState));
}

// 恢复完整表单状态
function restoreFormFullState(formGroup, storageKey = 'form_full_state') {
  const savedState = localStorage.getItem(storageKey);
  if (!savedState) return;
  const { value, controlStates } = JSON.parse(savedState);
  formGroup.patchValue(value);
  Object.entries(controlStates).forEach(([controlKey, state]) => {
    const control = formGroup.get(controlKey);
    state.touched && control.markAsTouched();
    state.dirty && control.markAsDirty();
  });
}

部分字段保存的处理 #

如果只需要保存特定字段，直接对formGroup.value做字段过滤即可：

// 仅保存name字段
const partialState = { name: this.forms.value.name };
localStorage.setItem('partial_form_state', JSON.stringify(partialState));
// 恢复时也只会更新name字段，address字段不受影响
this.forms.patchValue(JSON.parse(localStorage.getItem('partial_form_state')));

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