Angular11表单验证报TS2531错误：对象可能为'null'解决咨询

TS2531错误触发原因是Angular11默认开启了严格类型校验，表单控件的errors属性类型为ValidationErrors | null，直接访问errors.required时TypeScript判定errors存在为null的可能，因此抛出报错。你可以选择以下任意一种方案解决：

方案1：模板使用可选链操作符（修改成本最低） #

直接在模板访问errors的位置添加?.可选链操作符，空值情况下会自动终止属性访问，不会抛出异常。
修改后app.component.html的校验部分代码如下：

<!-- 姓名校验 -->
<div *ngIf="angForm.controls['name'].invalid && (angForm.controls['name'].dirty || angForm.controls['name'].touched)" class="alert alert-danger">
  <div *ngIf="angForm.controls['name'].errors?.required">
    Name is required.
  </div>
</div>
<!-- 地址校验，注意原模板此处提示为email is required属于笔误，可自行修改 -->
<div *ngIf="angForm.controls['address'].invalid && (angForm.controls['address'].dirty || angForm.controls['address'].touched)" class="alert alert-danger">
  <div *ngIf="angForm.controls['address'].errors?.required">
    Address is required.
  </div>
</div>

方案2：使用hasError方法（官方推荐写法） #

Angular表单控件内置了hasError方法，内部已经封装了空值判断逻辑，不需要手动处理errors是否为null，写法更规范：

<!-- 姓名必填判断 -->
<div *ngIf="angForm.controls['name'].hasError('required') && (angForm.controls['name'].dirty || angForm.controls['name'].touched)">
  Name is required.
</div>
<!-- 地址必填判断同理 -->
<div *ngIf="angForm.controls['address'].hasError('required') && (angForm.controls['address'].dirty || angForm.controls['address'].touched)">
  Address is required.
</div>

方案3：组件封装Getter简化模板代码 #

如果想要模板代码更简洁，可以在组件类中提前封装表单控件的Getter：

1. 修改app.component.ts，添加两个Getter：

export class AppComponent {
  title = 'Angular Form Validation Tutorial';
  angForm: FormGroup;
  // 新增Getter
  get name() { return this.angForm.get('name'); }
  get address() { return this.angForm.get('address'); }

  constructor(private fb: FormBuilder) {
    this.createForm();
  }
  createForm() {
    this.angForm = this.fb.group({
      name: ['', Validators.required ],
      address: ['', Validators.required ]
    });
  }
}

2. 模板中直接调用Getter即可：

<div *ngIf="name.invalid && (name.dirty || name.touched)" class="alert alert-danger">
  <div *ngIf="name.hasError('required')">
    Name is required.
  </div>
</div>

不推荐方案：关闭严格空校验 #

如果不需要严格空校验，可以修改项目根目录的tsconfig.json，将strictNullChecks设置为false即可，但会关闭整个项目的空值类型检查，不建议使用：

{
  "compilerOptions": {
    "strictNullChecks": false
  }
}

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