Angular结合Angular Material灵活展示表单字段错误的可扩展方案是什么？

现有方案的痛点 #

官方示例及大部分教程都采用单条mat-error加*ngIf判断的写法，表单字段多、校验规则复杂时会产生大量冗余重复代码。
自定义纯函数方案的局限性：

• 仅支持单层FormGroup，嵌套表单、FormArray场景适配成本高
• 纯函数无法注入依赖，不能直接对接多语言翻译服务，扩展性差

优化实现方案 #

1. 全局表单错误服务 #

基于Angular服务实现，天然支持DI注入，可以对接多语言服务，同时支持所有表单类型（FormControl/FormGroup/FormArray）：

import { Injectable } from '@angular/core';
import { AbstractControl } from '@angular/forms';
import { TranslateService } from '@ngx-translate/core'; // 可替换为项目实际使用的多语言服务

@Injectable({ providedIn: 'root' })
export class FormErrorService {
  constructor(private translate: TranslateService) {}

  getErrorMessage(control: AbstractControl): string | null {
    if (!control.errors) return null;

    // 按优先级匹配错误，优先匹配高优先级校验规则
    const errorKeys = Object.keys(control.errors);
    for (const key of errorKeys) {
      switch (key) {
        case 'required':
          return this.translate.instant('FORM_ERROR.REQUIRED');
        case 'email':
          return this.translate.instant('FORM_ERROR.EMAIL');
        case 'minlength':
          return this.translate.instant('FORM_ERROR.MIN_LENGTH', {
            length: control.errors['minlength'].requiredLength
          });
        case 'maxlength':
          return this.translate.instant('FORM_ERROR.MAX_LENGTH', {
            length: control.errors['maxlength'].requiredLength
          });
        case 'pattern':
          return this.translate.instant('FORM_ERROR.PATTERN');
        // 新增校验规则仅需要在此处添加对应分支即可
        default:
          return this.translate.instant('FORM_ERROR.UNKNOWN');
      }
    }
    return null;
  }
}

2. 封装通用mat-error组件 #

进一步简化模板代码，封装通用错误展示组件：

// mat-field-error.component.ts
import { Component, Input } from '@angular/core';
import { AbstractControl } from '@angular/forms';
import { FormErrorService } from './form-error.service';

@Component({
  selector: 'mat-field-error',
  template: `<mat-error *ngIf="errorMsg">{{ errorMsg }}</mat-error>`
})
export class MatFieldErrorComponent {
  @Input() control!: AbstractControl;

  constructor(private errorService: FormErrorService) {}

  get errorMsg() {
    // 仅在控件被触碰/修改后展示错误，符合Angular Material默认交互逻辑
    if (!this.control.touched && !this.control.dirty) return null;
    return this.errorService.getErrorMessage(this.control);
  }
}

记得将该组件声明到对应模块的declarations数组中，保证模板可正常调用。

3. 业务场景使用示例 #

组件TS代码

import { Component } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-signin',
  templateUrl: './signin.component.html'
})
export class SigninComponent {
  public signinForm = this.formBuilder.group({
    email: ['', [Validators.email, Validators.required]],
    password: ['', [Validators.required, Validators.minLength(6)]]
  });

  constructor(private formBuilder: FormBuilder) {}
}

模板HTML代码

<form [formGroup]="signinForm">
  <mat-form-field appearance="fill">
    <mat-label>{{ 'AUTH.EMAIL' | translate }}</mat-label>
    <input 
      matInput
      formControlName="email"
      [placeholder]="'AUTH.EMAIL_PLACEHOLDER' | translate"
    >
    <mat-field-error [control]="signinForm.controls.email"></mat-field-error>
  </mat-form-field>

  <mat-form-field appearance="fill">
    <mat-label>{{ 'AUTH.PASSWORD' | translate }}</mat-label>
    <input 
      type="password"
      matInput
      formControlName="password"
      [placeholder]="'AUTH.PASSWORD_PLACEHOLDER' | translate"
    >
    <mat-field-error [control]="signinForm.controls.password"></mat-field-error>
  </mat-form-field>
</form>

方案优势 #

• 全场景适配：支持单层表单、嵌套表单、FormArray等所有Angular表单类型，不需要额外适配逻辑
• 可扩展性强：新增校验规则仅需要在FormErrorService中增加对应错误key的处理分支，全项目所有表单自动生效
• 天然支持多语言：基于Angular服务实现，可自由注入多语言服务、全局配置等依赖
• 代码极简：模板层不需要写任何*ngIf判断逻辑，仅需要传入对应control即可自动匹配展示错误信息

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