Angular 14表单reset()测试环境报错，开发环境正常

问题详情 #

我用Angular 14开发了一个表格筛选表单，本地开发环境中调用表单的reset()方法一切正常，但部署到测试环境后执行该方法时出现错误。

错误信息 #

ERROR TypeError: Cannot assign to read only property '_pendingValue' of object '[object Object]'
    at FormControl._applyFormState (main.ec267cc59c801252.js:123875:39)
    at FormControl.reset (main.ec267cc59c801252.js:123797:10)
    at main.ec267cc59c801252.js:122817:15
    at main.ec267cc59c801252.js:122864:18
    at Array.forEach (<anonymous>)
    at FormGroup._forEachChild (main.ec267cc59c801252.js:122859:32)
    at FormGroup.reset (main.ec267cc59c801252.js:122816:10)
    at AmlNewGenCasesComponent.initFilterForm (807.bc72eefe3ce58b53.js:601:40)
    at AmlNewGenCasesComponent.onFilterClear (807.bc72eefe3ce58b53.js:722:18)
    at AmlNewGenCasesComponent_ng_template_79_Template_p_button_click_2_listener (template.html:103:38)

相关代码 #

onFilterClear() {
    if (FormsHelper.isAnyFieldPopulated(this.newGenCasesFilterForm)) {
      this.newGenCasesFilterForm.reset();
      this.initFilterForm();
      this.store.dispatch(getNewGen({gridFilter: this.newGenCasesFilter}));
    } else {
      this.messageService.add({severity: 'info', summary: 'ფილტრი', detail: 'ფილტრი ცარიელია'})
    }
  }

我曾尝试把this.newGenCasesFilterForm.reset();替换成this.newGenCasesFilterForm.resetForm();，但出现TS编译错误：TS2339: Property 'resetForm' does not exist on type 'FormGroup '.

解决办法 #

1. 移除多余的reset()调用，直接重新初始化表单 #

你的代码里调用reset()后立刻执行initFilterForm()重建表单，这两步其实重复了。直接重新初始化表单就能达到清空筛选条件的效果，还能规避生产环境下表单对象被冻结的问题。修改后的代码：

onFilterClear() {
    if (FormsHelper.isAnyFieldPopulated(this.newGenCasesFilterForm)) {
      // 直接调用初始化方法替代reset()
      this.initFilterForm();
      this.store.dispatch(getNewGen({gridFilter: this.newGenCasesFilter}));
    } else {
      this.messageService.add({severity: 'info', summary: '过滤器', detail: '过滤器为空'})
    }
  }

2. 检查表单是否被意外冻结 #

如果你的项目使用了状态管理库（比如NgRx）或者手动调用了Object.freeze()，可能导致FormGroup/FormControl实例被冻结，无法修改内部属性。检查initFilterForm()方法，确保创建表单时没有冻结实例，或者每次重置时生成新的FormGroup实例。

3. 升级Angular 14到最新补丁版本 #

Angular 14的早期版本在生产模式处理表单reset时存在已知bug，升级到14.2.x系列的最新补丁版本，大概率能解决这类底层的表单操作问题。

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