如何捕获Angular响应式表单(reactive form)的错误事件并调用函数

实现方案 #

Angular Material 表单字段显示红色错误样式的时机，由内置的ErrorStateMatcher规则控制，默认触发条件为：表单控件无效 + 控件已被触碰（touched为true）/ 父表单已提交，你可以结合状态监听和匹配器规则来捕获这个时机，具体实现如下：

• 监听控件状态并匹配错误状态
  组件内引入默认错误状态匹配器，监听控件的statusChanges事件，每次状态变更时通过匹配器判断是否进入错误显示状态：

  import { Component, OnDestroy, OnInit } from '@angular/core';
  import { FormControl, FormGroup, Validators } from '@angular/forms';
  import { ErrorStateMatcher } from '@angular/material/core';
  import { Subject, takeUntil } from 'rxjs';
  
  @Component({
    selector: 'app-test-form',
    templateUrl: './test-form.component.html',
    styleUrls: ['./test-form.component.css']
  })
  export class TestFormComponent implements OnInit, OnDestroy {
    private destroy$ = new Subject<void>();
    // 实例化默认错误状态匹配器，复用官方判断逻辑
    private errorMatcher = new ErrorStateMatcher();
  
    testForm = new FormGroup({
      username: new FormControl('', [Validators.required, Validators.minLength(3)])
    });
  
    ngOnInit(): void {
      const usernameControl = this.testForm.get('username') as FormControl;
      // 监听控件有效性变化
      usernameControl.statusChanges
        .pipe(takeUntil(this.destroy$))
        .subscribe(() => {
          this.checkAndTriggerCustomLogic(usernameControl);
        });
    }
  
    ngOnDestroy(): void {
      // 销毁订阅避免内存泄漏
      this.destroy$.next();
      this.destroy$.complete();
    }
  
    private checkAndTriggerCustomLogic(control: FormControl): void {
      const isShowErrorStyle = this.errorMatcher.isErrorState(control, this.testForm);
      if (isShowErrorStyle) {
        // 此处调用你需要执行的自定义函数
        this.yourCustomFunction();
      }
    }
  
    private yourCustomFunction(): void {
      // 你的业务逻辑
      console.log('字段进入错误显示状态');
    }
  }
  

• 补充监听失焦事件
  控件失焦时仅会修改touched状态，不会触发statusChanges，需要在模板中绑定blur事件补充判断：

  <form [formGroup]="testForm">
    <mat-form-field>
      <mat-label>用户名</mat-label>
      <input 
        matInput 
        formControlName="username"
        (blur)="checkAndTriggerCustomLogic(testForm.get('username') as FormControl)"
      >
      <mat-error *ngIf="testForm.get('username')?.invalid">
        用户名长度不能小于3位
      </mat-error>
    </mat-form-field>
    <button mat-raised-button color="primary" type="submit">提交</button>
  </form>
  

• 额外适配场景
  如果你自定义过全局/局部的ErrorStateMatcher，直接使用你自定义的匹配器实例替换示例中的默认ErrorStateMatcher实例即可，判断逻辑无需修改。如果需要在表单提交时也触发判断，给表单绑定ngSubmit事件，提交时调用checkAndTriggerCustomLogic方法即可。

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