Angular：表单提交后如何保留表单字段值？

核心问题分析 #

表单提交后值消失的主要原因是浏览器默认的表单提交行为会刷新页面，导致内存中的表单状态全部丢失。另外你的updateFormValues函数存在不必要的表单重置操作，也会影响值的保留。

具体修改步骤 #

1. 阻止页面默认刷新行为 #

修改模板中的表单提交事件，传递事件对象并阻止默认行为：

<form [formGroup]="form" #formDirective="ngForm" (submit)="saveProductGroup($event)">

然后在组件类的saveProductGroup方法中添加阻止默认行为的代码，同时提交成功后更新当前组件的productGroup，确保表单显示最新提交的数据：

saveProductGroup(event: Event): void {
  // 阻止浏览器默认的表单提交刷新行为
  event.preventDefault();
  
  if (!this.form.valid) {
    return;
  }

  const payload = { ...this.form.getRawValue() };
  const action = this.productGroup
    ? this.productGroupsService.updateProductGroup(this.customerId, payload)
    : this.productGroupsService.createProductGroup(this.customerId, payload);
  
  action.subscribe(({ message, data }) => {
    this.commonService.showUserNotification(message, 'ok');
    // 更新当前组件的productGroup，让表单自动同步最新值
    this.productGroup = data;
    this.saved.emit(data);
  });
}

2. 优化updateFormValues函数 #

移除不必要的resetForm调用，避免先清空表单再赋值的问题，同时优化控件启用/禁用逻辑：

updateFormValues(productGroup: Manufacturer.ProductGroup): void {
  if (productGroup) {
    // 先启用控件，确保能正常赋值
    this.form.controls.code.enable();
    this.form.controls.type.enable();
    
    // 使用patchValue批量更新表单值
    this.form.patchValue({
      code: productGroup.code,
      type: productGroup.type,
      description: productGroup.description
    });

    // 重新禁用需要锁定的控件
    this.form.controls.code.disable();
    this.form.controls.type.disable();
  } else {
    // 重置表单到初始状态
    this.form.reset({
      code: '',
      type: '',
      description: ''
    });
    // 确保控件处于启用状态
    this.form.controls.code.enable();
    this.form.controls.type.enable();
  }
}

补充说明 #

• 之前尝试patchValue无效，大概率是因为控件处于禁用状态，Angular默认不会更新禁用控件的值，所以需要先启用控件再赋值，完成后重新禁用。
• 提交后更新productGroup，会触发ngOnChanges调用updateFormValues，自动同步表单显示最新的提交结果，不需要手动处理表单值。

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