Angular 9 Reactive Form 校验失效及错误读取报错求助

控制台报的Cannot read property 'errors' of undefined不是Reactive Form配置的问题，是模板里控件名拼写和实际定义不匹配，空引用打断了整个模板渲染，才导致所有校验、错误提示看起来都失效了。

打开app.component.html，找到确认密码输入框的样式绑定行：

[ngClass]="{ 'is-invalid': submitted && f.confirmPassword.errors }"

这里引用的控件名是 confirmPassword（带大写P），但你在app.component.ts里定义profileForm的时候，注册的控件名是全小写的 confirmpassword。
f是profileForm.controls的快捷getter，访问f.confirmPassword时这个属性是undefined，直接读它的errors属性就会抛错。这个渲染阶段的报错会直接中断整个组件的渲染流程，后续所有的表单绑定、校验逻辑都不会正常执行。

除了核心的拼写错误，还有几处细节会影响校验体验：

• 邮件字段的错误判断缺少空值保护和提交状态判断
  当前代码直接写死了*ngIf="f.email.hasError('pattern')"，建议改成带可选链、结合提交状态的判断，避免初始化阶段报错、用户还没输入就弹提示：

  <div *ngIf="submitted && f.email?.errors?.pattern" class="invalid-feedback">
      哎呀，格式不对哦！
  </div>
  

• 密码长度的错误文案和校验规则不匹配
  组件里给密码设置的是Validators.minLength(8)，但模板里写的提示是“密码长度至少为6位”，需要同步修正文案和可选链判断：

  <div *ngIf="f.password.errors?.minlength">密码长度至少为8位</div>
  

• 显示密码按钮缺少类型定义
  这个按钮没写type="button"，默认会被识别为提交按钮，点击就会触发表单提交，建议补上类型：

  <button type="button" (click)="password()">显示密码</button>
  

把上述问题修正后重新运行项目：

• 控制台的空引用报错会消失
• 表单校验不通过时，提交按钮会自动置灰不可点
• 提交表单后，所有必填校验、格式校验、长度校验、两次密码一致性校验的错误提示都会正常显示

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