Angular 9：HttpClient POST请求后如何实现表单重置与成功提示？

嘿，我懂你现在的困扰——提交表单后想清空表单还得显示成功提示，一开始想着刷新页面来实现，但其实完全没必要哦！Angular是单页应用，咱们直接操作表单状态和组件变量就能优雅搞定，根本不用折腾页面刷新～

核心思路：别折腾页面刷新，直接操作表单与组件状态 #

你之前尝试的router导航或者ngZone其实都是绕远路了，单页应用的优势就是不用刷新就能更新视图，咱们只要做这两步就行：

1. 表单提交成功后，调用Angular表单的重置方法清空表单
2. 通过组件变量控制成功提示的显示/隐藏

具体修改步骤 #

1. 组件类修改：添加提示变量+完善save方法

首先在组件里加个变量用来存成功/错误提示，然后在API请求成功的回调里重置表单、设置提示内容：

@Component({ 
  selector: 'my-form', 
  templateUrl: './my-form.component.html', 
}) 
export class MyFormComponent implements OnInit {
  // 新增：用来存储成功/错误提示
  successMessage = '';

  constructor(private apiService: APIService) {} 

  ngOnInit() {} 

  save(myForm: NgForm) {
    // 提交前先清空之前的提示
    this.successMessage = '';
    
    this.apiService.addSomething(myForm.value).subscribe(
      (res) => {
        // 1. 清空表单：直接调用NgForm的resetForm方法
        myForm.resetForm();
        // 2. 设置成功提示
        this.successMessage = '表单提交成功！';
        // 可选：3秒后自动隐藏提示
        setTimeout(() => {
          this.successMessage = '';
        }, 3000);
      },
      (error) => {
        // 可选：处理错误提示
        this.successMessage = '提交失败，请稍后重试';
      }
    ); 
  } 
}

2. 模板修改：添加成功提示的显示区域

在表单下面加个提示框，用*ngIf控制它的显示：

<form #myForm="ngForm" (ngSubmit)="save(myForm)">
  <!-- 这里放你的表单控件，比如input、select等 -->
  
  <button type="submit" class="btn btn-success submit-button"> Submit </button>
  
  <!-- 成功提示框 -->
  <div *ngIf="successMessage" class="alert alert-success mt-3">
    {{ successMessage }}
  </div>
</form>

3. 修正API服务的笔误

我注意到你的addSomething方法里参数是thing，但POST请求里传的是submission，这明显是笔误，得改过来不然请求会出错：

// Add a thing
public addSomething(thing: ThingType) {
  return this.httpClient
    .post(this.SERVER_URL + '/things', thing, this.httpOptions) // 把submission改成thing
    .pipe(catchError(this.handleError));
}

为什么之前的刷新方法没用？ #

Angular的router.navigate默认不会重新加载当前组件，就算你用ngZone包裹，单页应用的路由机制也会避免不必要的页面刷新。而且刷新页面会丢失当前组件的状态，用户体验也不好，完全没必要这么做～

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