升级Angular12后报错：main.js:1 ERROR TypeError: Cannot read property '_rawValidators' of null

当前环境:

Angular CLI: 12.1.2
Node: 14.17.0
Package Manager: npm 7.19.1
OS: darwin x64

之前也遇到过这个错误，但是升级Angular12后出现了该错误。Form表单报错，但是没有更详细的信息。

main.js:1 ERROR TypeError: Cannot read property '_rawValidators' of null
    at F (main.js:1)
    at Q (main.js:1)
    at G (main.js:1)
    at t.addControl (main.js:1)
    at t._setUpControl (main.js:1)
    at t.ngOnChanges (main.js:1)
    at t._t (main.js:1)
    at xe (main.js:1)
    at Se (main.js:1)
    at we (main.js:1)

只有一个有效的关键词是_rawValidators。开始以为是Validators校验规则写的有问题，但是把组件里的 Validators 都去掉了还是会报错。

后来才发现，原来是写错字段名称了。

比如在 component.ts 里写的表单字段是 title:

// test-edit.component.ts
editForm = this.fb.group({
    id: [''],
    title: [''],
    startTime: [''],
    endTime: [''],
  });

而在 component.html 的formControlName字段名写的是 title2222 这种，找不到的表单字段。

// test-edit.component.html
<form nz-form [formGroup]="editForm">
  <nz-form-item>
   <nz-form-label [nzXs]="24" nzFor="title">名称</nz-form-label>
    <nz-form-control [nzXs]="6" nzErrorTip="名称必填">
      <input nz-input formControlName="title2222" placeholder="名称" />
    </nz-form-control>
 </nz-form-item>
</form>    

原来不是框架的bug，是自己的手误，特此记录一下。