Angular表单报错：Cannot read property 'required' of null问题排查求助

你遇到的这个错误是典型的空值访问问题——当你触发控件的touched状态后，courseCategory.errors对象可能还处于null状态，这时候直接去访问errors.required就会抛出Cannot read property 'required' of null的报错，和你安装的Bootstrap版本完全没关系哦。

给你两种简单的修复方案，任选其一就行：

方案1：使用安全导航操作符（?.） #

在访问required属性前加上安全导航符，确保只有当errors存在时才会去读取它的属性：

<div class="alert alert-danger" *ngIf="courseCategory.touched && courseCategory.errors?.required">
  Course category is required
</div>

方案2：使用Angular内置的hasError方法（推荐） #

Angular的NgModel控件本身提供了hasError()方法来检查特定验证规则，这种方式更直观也更安全，不需要直接操作errors对象：

<div class="alert alert-danger" *ngIf="courseCategory.touched && courseCategory.hasError('required')">
  Course category is required
</div>

另外顺便提一句，你的下拉框初始的空<option value=""></option>设置是对的，这样能确保用户必须主动选择一个分类，符合必填验证的需求。

内容的提问来源于stack exchange，提问作者Alpha Bravo Charlie