Angular 8表单报错：Cannot read property 'invalid' of null及数据异常求助

Hey there, let's work through the two issues you're hitting with your Angular form step by step:

1. "Cannot read property 'invalid' of null" 错误 #

这个错误的根源在你的IdNumber getter方法里：

get IdNumber() { return this.newEntryForm.get('Id'); }

你在表单组里定义的字段名是IdNumber，但这里你尝试获取的是'Id'——这个字段根本不存在，所以get()方法返回null。当你在模板里使用IdNumber.invalid时，自然就会抛出“无法读取null的invalid属性”的错误。

修复方案：把getter里的字段名改成和表单组一致的'IdNumber'：

get IdNumber() { return this.newEntryForm.get('IdNumber'); }

2. 部分字段数据未被记录 #

只有Firstname、Lastname等少数字段能被跟踪，大概率是下面两个原因之一：

• HTML模板里未绑定对应字段：你省略了部分HTML代码，但要确保所有需要跟踪的字段都添加了formControlName属性，并且属性值和TS里表单组的字段名完全一致。比如对于Address1Home和EmailHome，HTML里应该这样写：

  <input type="text" formControlName="Address1Home" class="form-control">
  <input type="email" formControlName="EmailHome" class="form-control">
  

  如果没有这个绑定，Angular无法把输入值同步到表单组里。
• 字段名拼写/大小写不一致：Angular对表单字段名区分大小写，检查你定义的表单组字段、getter方法里的字段名，以及HTML里的formControlName是否完全匹配。比如如果表单组里是Address1Home，但HTML里写成address1home，就会导致数据无法被记录。

额外小技巧 #

可以暂时保留模板里的{{newEntryForm.value|json}}输出，修复后刷新页面并输入所有字段的值，就能直观看到哪些字段已经被正确绑定并跟踪了。

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