Angular中绑定formControl到外部formGroup导致mat-error失效问题

问题核心是：Angular Material的默认ErrorStateMatcher会检查控件所在的<form>元素的提交状态，但你的输入框不在表单标签内，无法关联表单提交事件，导致mat-error不触发。

方案一：自定义ErrorStateMatcher（推荐） #

通过自定义匹配器，让它关联到目标FormGroup的提交状态，而非依赖控件所在的表单标签。

1. 创建自定义匹配器类

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

export class ExternalControlErrorMatcher implements ErrorStateMatcher {
  constructor(private formRef: FormGroupDirective | NgForm) {}

  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    // 检查控件本身的错误+触摸/脏状态，同时检查关联表单的提交状态
    const hasControlErrors = !!(control && control.invalid && (control.dirty || control.touched));
    const formSubmitted = !!(control && this.formRef && this.formRef.submitted);
    return hasControlErrors || formSubmitted;
  }
}

2. 在组件中关联表单引用并实例化匹配器

import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormGroupDirective } from '@angular/forms';
import { ExternalControlErrorMatcher } from './external-control-error.matcher'; // 替换为你的文件路径

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, AfterViewInit {
  formAdd!: FormGroup;
  usernameErrorMatcher!: ExternalControlErrorMatcher;

  @ViewChild(FormGroupDirective) formDirective!: FormGroupDirective;

  constructor(private _formBuilder: FormBuilder) {}

  ngOnInit(): void {
    this.formAdd = this._formBuilder.group({
      username: ['', [Validators.required]]
    });
  }

  ngAfterViewInit(): void {
    // 视图加载完成后，关联表单引用到匹配器
    this.usernameErrorMatcher = new ExternalControlErrorMatcher(this.formDirective);
  }

  onSubmit() {
    if (this.formAdd.invalid) {
      // 可选：如果需要强制触发所有控件的触摸状态
      this.formAdd.markAllAsTouched();
      return;
    }
    // 执行提交逻辑
  }
}

3. 在模板中给输入框绑定自定义匹配器

<form #formDirective="ngForm" [formGroup]="formAdd" (ngSubmit)="onSubmit()"></form>

<mat-form-field>
  <input matInput 
         [formControl]="formAdd.controls.username" 
         [errorStateMatcher]="usernameErrorMatcher">
  <mat-error>Username is required</mat-error>
</mat-form-field>

方案二：提交时手动标记控件为触摸状态 #

如果不需要在表单提交时立即显示未触摸控件的错误，仅需在提交后让错误显示，可以简化操作：

修改组件的onSubmit方法：

onSubmit() {
  // 标记所有控件为触摸状态，触发默认错误匹配逻辑
  this.formAdd.markAllAsTouched();
  
  if (this.formAdd.valid) {
    // 执行提交逻辑
  }
}

模板中无需修改匹配器，保持原有代码即可。

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