如何在Angular 10中自动重置formGroup绑定的表单输入值？

问题根源 #

你当前的代码逻辑中，每次SearchComponent初始化时都会从全局/父级维护的this.values[0].value读取历史搜索词赋值给表单，你在ngOnDestroy中只做了订阅取消的操作，既没有清空表单的当前值，也没有清空this.values[0].value中存储的历史搜索词，所以下次进入搜索页时，ngOnInit会重新把旧的搜索词回填到输入框中，和订阅是否取消没有关联。

解决方案 #

直接在已触发的ngOnDestroy钩子中补充重置逻辑即可，修改后的代码如下：

ngOnDestroy(): void {
  this.searchSub.unsubscribe();
  // 重置表单所有字段值
  this.searchForm.reset();
  // 清空存储的历史搜索词，避免下次组件初始化时回填旧值
  this.values[0].value = '';
  console.log("haha")
}

特殊场景补充 #

如果调整后仍存在缓存问题，可检查项目是否开启了路由复用策略（常见于中后台框架默认配置）：

• 若开启了路由复用，可配置排除/search路由的缓存，保证离开页面时组件会正常销毁触发ngOnDestroy
• 也可将表单初始化赋值逻辑替换为强制设空，不用读取存储的历史值：

ngOnInit(): void {
  // 直接设为空，不读取历史存储值
  this.searchForm.get('search')?.setValue('');
  // 后续订阅逻辑保持不变
  this.searchSub = this.searchForm.controls.search.valueChanges
    .pipe(debounceTime(400), distinctUntilChanged())
    .subscribe(
      (term) => {
        this.values[0].value = term;
        this.emitState();
      },
      (err) => console.log(err)
    );
}

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