Angular Material子组件mat-error提交父表单时不显示问题问询

这个问题我之前也碰到过，本质是Angular Material的mat-error默认显示规则在搞事情：只有当表单控件被标记为touched（已点击过）或dirty（已修改过）时，mat-error才会渲染出来。当你提交验证不通过的表单时，父组件的输入框可能因为表单提交触发的验证逻辑被自动标记为touched，但子组件的输入框还处于untouched状态，所以它的错误提示就不会自动显示。

下面给你两种实用的解决办法：

方法一：提交时强制标记所有控件为touched #

这是最简单直接的方案，在父组件的提交方法里调用表单的markAllAsTouched()方法，把所有表单控件（包括子组件里的）都标记为已触摸状态，这样所有mat-error就会一起显示出来。

修改父组件的onSubmit方法：

onSubmit() {
  // 先标记所有控件为已触摸，触发错误提示显示
  this.form.markAllAsTouched();
  
  // 再判断表单是否有效，无效就终止提交
  if (this.form.invalid) {
    return;
  }
  
  // 这里写你的表单提交逻辑
}

方法二：自定义ErrorStateMatcher（更灵活的控制） #

如果你想让mat-error在表单提交过且控件无效时就显示，不管用户有没有点击过输入框，可以自定义一个ErrorStateMatcher来修改显示规则。

1. 先创建自定义的Matcher类：

import { ErrorStateMatcher } from '@angular/material/core';
import { FormControl, FormGroupDirective, NgForm } from '@angular/forms';

export class SubmitErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const isFormSubmitted = form && form.submitted;
    // 只要控件无效，且满足「已修改/已触摸/表单已提交」其中一个条件，就显示错误
    return !!(control && control.invalid && (control.dirty || control.touched || isFormSubmitted));
  }
}

2. 然后在子组件中使用这个Matcher：
   修改子组件模板，给输入框绑定自定义的Matcher：

<div [formGroup]="form">
  <mat-form-field>
    <input type="password" 
           formControlName="newPassword" 
           matInput 
           placeholder="password"
           [errorStateMatcher]="customMatcher"> <!-- 绑定自定义Matcher -->
    <mat-error *ngIf="form.get('newPassword').hasError('required')">Password Required</mat-error>
  </mat-form-field>
</div>

子组件TS代码中实例化这个Matcher：

export class ChildComponent implements OnInit {
  @Input() form: FormGroup;
  customMatcher = new SubmitErrorStateMatcher(); // 实例化自定义Matcher

  ngOnInit(): void {
    const newPassword = new FormControl('', Validators.compose([Validators.required]));
    this.form.addControl('newPassword', newPassword);
  }
}

最后提个小建议：子组件动态往父表单加控件的方式虽然能跑，但更规范的做法是父组件提前构建完整的表单组，再把对应的FormControl传递给子组件，这样表单结构更清晰，后期维护也更方便。

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