Angular表单重置后报Cannot read property 'value' of null错误的解决

这个错误的核心原因很明确：当你调用表单的reset()方法后，injuryType这个FormControl的值被重置为null了，但你的*ngIf表达式里直接链式访问了value.value——当injuryType.value为null时，再尝试读取它的value属性，自然就会抛出Cannot read property 'value' of null的错误。

为什么初始加载时没问题？因为初始化表单时你给injuryType设置了默认值''（空字符串），这时候injuryType.value是一个字符串，虽然字符串本身没有value属性（访问它会得到undefined），但因为你的条件不成立（undefined不等于目标字符串），所以这个div不会被渲染，Angular也就不会触发这个错误。但reset之后，injuryType.value变成了null，这时候再访问null.value就直接报错了。

这里有几种简单有效的解决方式，你可以根据自己的习惯选择：

1. 使用Angular安全导航操作符（?.） #

这是最直接的修复方式，在链式访问的每一步都加上?.，避免空值导致的报错：

<div class="axis-form-group" *ngIf="damageDetailsTwoForm?.controls?.injuryTypeGp?.controls?.injuryType?.value?.value === 'Burglary in the car' || damageDetailsTwoForm?.controls?.injuryTypeGp?.controls?.injuryType?.value?.value === 'Theft of license plates'">
  <!-- 你的内容 -->
</div>

?.操作符会在访问属性前检查当前对象是否为null或undefined，如果是就停止后续访问，返回undefined，不会抛出错误。

2. 提取为组件的Getter方法（推荐） #

把复杂的条件判断逻辑移到组件类里，不仅让模板更简洁，也更容易维护和调试：

首先在组件类里定义一个getter：

get shouldShowPoliceReportSection(): boolean {
  // 先安全获取injuryType的选中值
  const selectedInjuryValue = this.damageDetailsTwoForm?.get('injuryTypeGp.injuryType')?.value?.value;
  // 判断是否属于需要显示的类型
  return ['Burglary in the car', 'Theft of license plates'].includes(selectedInjuryValue);
}

然后模板里直接使用这个getter：

<div class="axis-form-group" *ngIf="shouldShowPoliceReportSection">
  <!-- 你的内容 -->
</div>

这种方式还能让你在后续需要修改判断条件时，只需要修改组件类里的代码，不用动模板。

3. 重置表单时设置默认值 #

如果你不想让injuryType的值变成null，可以在调用reset()时给它指定一个默认的空对象（匹配你选中项的结构）：

比如在重置表单的地方：

this.damageDetailsTwoForm.reset({
  injuryTypeGp: {
    injuryType: { value: '' }, // 这里设置和选中项一致的结构
    damageReportedToPolice: '',
    itemOwner: '',
    objectDescription: ''
  },
  damageReported: '',
  selfRiskAmount: '',
  otherCompanyName: '',
  policyNo: ''
});

这样reset之后，injuryType.value是{ value: '' }，访问value.value就会得到空字符串，不会出现null的情况。

另外，建议你在组件里给常用的表单控件定义getter，简化模板里的访问：

get injuryTypeControl(): FormControl {
  return this.damageDetailsTwoForm.get('injuryTypeGp.injuryType') as FormControl;
}

这样不管是模板还是组件类里，都可以直接用this.injuryTypeControl来访问这个控件，不用写长长的链式调用，代码可读性更高。

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