Angular12报错:Cannot read property _rawValidators of null

阳光穿透心脏的1/2处 2022-08-30 06:18 15阅读 0赞

升级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，是自己的手误，特此记录一下。