angular FormGroup 问题："Cannot read properties of null (reading '_rawValidators')"
0
悬赏园豆：30
[已解决问题]
解决于 2024-03-08 12:50
使用 FormBuilder 创建 FormGroup 遇到问题
组件的构造函数中创建 FormGroup 的代码：
this.editLinkForm = this.fb.group({
linkTitle: ''
});
对应的 html 代码：
<div class="d-flex flex-column" [formGroup]="editLinkForm">
<input control
id="linkTitle"
type="text"
class="cnb-input"
formControlName="linkTitle">
</div>
运行时却报错
Uncaught TypeError: Cannot read properties of null (reading '_rawValidators')
at we (main.d2157c0ae1861a04.js:1:698436)
at ai (main.d2157c0ae1861a04.js:1:713431)
at Mn (main.d2157c0ae1861a04.js:1:712237)
at G.addControl (main.d2157c0ae1861a04.js:1:726223)
at G._setUpControl (main.d2157c0ae1861a04.js:1:719818)
请问如何解决？
最佳答案
0
是忘了把 <div> 改为 <form> 引起的
<form class="d-flex flex-column" [formGroup]="editLinkForm">
<input control
id="linkTitle"
type="text"
class="cnb-input"
formControlName="linkTitle">
</form>
弄错了，后来找到了问题的真正原因
如果一个 form control 添加了 formControlName 属性，而 this.fb.group 中没有指定对应这个 formControlName 的参数，就会报错 "Cannot read properties of null (reading '_rawValidators')"
提问中出现的问题不是 linkTitle form control 引起的，而是在页面中有另外的 form control
<input control
type="text"
formControlName="url"
class="cnb-input">
上面的 input 添加了 formControlName 属性，但 this.fb.group 中没有进行初始化
github 上的相关 issue https://github.com/angular/angular/issues/48379
