Angular 12 Reactive forms报hasValidator is not a function错误如何修复？

错误原因 #

该错误由Angular核心依赖与Angular Material依赖版本不兼容导致：hasValidator是Angular 12.2.0版本才新增的FormControl实例方法，若使用的Angular Material/CDK版本高于12.2.0，但Angular核心（@angular/core、@angular/forms等）版本低于12.2.0，Material组件调用不存在的hasValidator方法就会抛出该异常。

修复步骤 #

• 第一步：检查当前依赖版本，在项目根目录执行如下命令查看版本匹配情况：
  npm list @angular/core @angular/material @angular/cdk
• 第二步：对齐依赖版本，两种方案二选一即可：
  1. 升级Angular核心相关依赖到12.2.x最新补丁版本：
     npm install @angular/core@12.2 @angular/forms@12.2 @angular/common@12.2 @angular/platform-browser@12.2
  2. 降级Angular Material和CDK到与核心版本匹配的版本，比如核心版本为12.1.x则执行：
     npm install @angular/material@12.1 @angular/cdk@12.1
• 第三步：修正模板语法小问题
  现有模板中提交按钮的disabled属性绑定缺少双引号，修正为：

  <button type="submit" mat-raised-button color="primary" [disabled]="loginForm.invalid">Submit</button>
  

• 第四步：删除项目根目录下的node_modules文件夹、package-lock.json（或yarn.lock）文件，重新执行npm install安装依赖，重启开发服务后问题即可解决。

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