Angular12报错:Cannot read property _rawValidators of null

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

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

当前环境:

  1. Angular CLI: 12.1.2
  2. Node: 14.17.0
  3. Package Manager: npm 7.19.1
  4. OS: darwin x64

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

  1. main.js:1 ERROR TypeError: Cannot read property '_rawValidators' of null
  2.     at F (main.js:1)
  3.     at Q (main.js:1)
  4.     at G (main.js:1)
  5.     at t.addControl (main.js:1)
  6.     at t._setUpControl (main.js:1)
  7.     at t.ngOnChanges (main.js:1)
  8.     at t._t (main.js:1)
  9.     at xe (main.js:1)
  10.     at Se (main.js:1)
  11.     at we (main.js:1)

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

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

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

  1. // test-edit.component.ts
  2. editForm = this.fb.group({
  4.     id: [''],
  5.     title: [''],
  6.     startTime: [''],
  7.     endTime: [''],
  8.   });

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

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

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

发表评论

表情：
评论列表 （有 0 条评论，127人围观）

还没有评论，来说两句吧...

相关阅读