Angular使用FormControlName报Cannot read property 'get' of null错误求助

1 核心报错根因 #

第一个登录表单的formGroup绑定语法错误，你写的是(formGroup)="signInForm"，圆括号是Angular的事件绑定语法，而formGroup是组件的输入属性，需要用方括号[]做属性绑定，错误的绑定导致formGroup的值为null，当FormGroupDirective尝试调用null的get()方法读取表单控件时就抛出了这个错误。
修复方案：把第一个form标签修改为：

<form [formGroup]="signInForm">

2 其他影响运行的问题 #

2.1 禁止混合使用两类表单语法 #

你在表单元素上同时写了formControlName和[(ngModel)]，这分别属于响应式表单、模板驱动表单两套体系，Angular默认不允许混合使用，不仅冗余还会引发表单状态异常。
修复方案：

• 移除所有input上的[(ngModel)]绑定，以及对应TS里声明的email/name/pass等冗余变量，响应式表单直接通过表单实例.value或表单实例.get('控件名').value读取值即可
• 若一定要保留ngModel，需要给对应input加上[ngModelOptions]="{standalone: true}"，但不推荐该写法

2.2 TS文件业务逻辑错误 #

• signIn方法错误校验了signUpForm的状态，应该校验自身对应的signInForm
• signUp方法的校验逻辑写反：当前逻辑是「表单有效 或者 密码不一致就判定为无效」，正确逻辑应该是「表单无效 或者 密码不一致时判定为无效」
  修复后的两个方法代码：

signUp(){
  // 表单无效 或 两次密码不一致 则拦截
  if(!this.signUpForm.valid || (this.signUpForm.controls.pass.value !== this.signUpForm.controls.conpass.value))
  {
    console.log("Invalid Form!")
    return;
  }
  console.log(JSON.stringify(this.signUpForm.value))
}

signIn(){
  // 登录表单无效则拦截
  if(!this.signInForm.valid)
  {
    console.log("Invalid Form!")
    return;
  }
  console.log(JSON.stringify(this.signInForm.value))
}

2.3 表单初始化写法不统一 #

你使用FormBuilder的同时，signUpForm的name控件单独用了new FormControl(Validators.required)写法，和其他控件的FormBuilder规范写法不一致，修改为统一写法即可：

signUpForm=this.fb.group ({
  name : [null, Validators.required],
  // 其余控件保持不变
});

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