Angular 5中mat-error未显示错误消息问题求助

我帮你梳理下问题的根源和解决步骤，先看最关键的错误：

1. 修复表单控件绑定的拼写错误 #

你HTML里的formControlname是错误的！Angular的表单绑定指令是**formControlName**（注意最后一个字母N是大写的）。这个拼写错误会直接导致输入框无法和formPersonalRecord里的表单控件建立关联——相当于表单根本没识别到这些输入框，自然valueChanges事件不会触发，mat-error也不会生效。

把所有input标签里的formControlname改成formControlName，比如：

<input matInput placeholder="First Name" formControlName="firstName">

2. 优化mat-error的显示条件 #

Angular Material的mat-error默认需要控件被标记为touched（已触碰过）或者dirty（值已修改）才会显示错误提示。你当前的*ngIf只判断了formErrors.firstName.required，可以调整为更严谨的条件，确保用户离开输入框时显示错误：

<mat-error *ngIf="formPersonalRecord.get('firstName').hasError('required') && (formPersonalRecord.get('firstName').touched || formPersonalRecord.get('firstName').dirty)">
  Please provide name.
</mat-error>

或者如果你想继续用formErrors，也要确保onFormValuesChanged能正确更新错误状态，同时结合控件的touched/dirty状态。

3. 确保表单值变更订阅正常工作 #

修复拼写错误后，this.formPersonalRecord.valueChanges.subscribe()应该能正常触发onFormValuesChanged方法了。另外，建议在ngOnInit末尾手动调用一次onFormValuesChanged()，这样页面加载时就能初始化错误状态（比如用户直接提交空表单时，错误提示能立刻显示）：

ngOnInit() {
  // ... 表单构建和formErrors初始化代码 ...
  
  this.formPersonalRecord.valueChanges.subscribe(() => {
    this.onFormValuesChanged();
  });
  
  // 初始化错误状态
  this.onFormValuesChanged();
}

4. 可选：调整表单更新时机（按需） #

如果你希望在用户离开输入框（blur事件）时才触发验证和错误更新，可以在构建表单控件时设置updateOn: 'blur'，这样能减少不必要的验证触发：

this.formPersonalRecord = this.builder.group({
  firstName: ['', {validators: Validators.required, updateOn: 'blur'}],
  lastName: ['', {validators: Validators.required, updateOn: 'blur'}],
  // 其他字段同理
});

完成以上步骤后，你的表单应该能正常触发值变更事件，并且在字段为空且失去焦点时显示mat-error提示了。

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