封装Angular Material matInput组件后错误样式未显示的问题

我来帮你搞定这个验证样式不显示的问题！核心原因是你虽然实现了ControlValueAccessor，但没有把外部表单控件的状态（比如invalid、touched）同步到内部的mat-form-field和输入框上，而Angular Material的错误样式完全依赖这些状态判断。下面是具体的修复方案：

第一步：调整组件逻辑，关联外部表单控件状态 #

我们需要主动注入NgControl，把组件和外部的表单控件绑定，同时自己实现完整的ControlValueAccessor方法（而不是依赖DefaultValueAccessor），这样才能同步状态。

修改后的组件代码：

import { Component, OnInit, ViewChild, ElementRef, Self, Optional } from '@angular/core';
import { ControlValueAccessor, NgControl, FormControl, FormGroupDirective, NgForm, Validators } from '@angular/forms';
import { ErrorStateMatcher } from '@angular/material/core';

export class PasswordFieldComponent implements OnInit, ControlValueAccessor, ErrorStateMatcher { 
  @ViewChild('passwordInput') passwordInput: ElementRef<HTMLInputElement>;
  @Input() customClass: string; 
  @Input() customPlaceholder: string; 
  @Input() required = true; 
  hide = true;

  // ControlValueAccessor相关回调
  onChange: (value: string) => void = () => {};
  onTouched: () => void = () => {};
  isDisabled = false;

  constructor(@Self() @Optional() public ngControl: NgControl) {
    // 将组件自身设为表单控件的valueAccessor
    if (this.ngControl) {
      this.ngControl.valueAccessor = this;
      // 同步required验证规则
      if (this.required) {
        this.ngControl.setValidators([Validators.required]);
        this.ngControl.updateValueAndValidity();
      }
    }
  } 

  ngOnInit() { } 

  // 实现ControlValueAccessor的writeValue方法
  writeValue(value: string): void {
    if (this.passwordInput && value !== undefined) {
      this.passwordInput.nativeElement.value = value;
    }
  }

  registerOnChange(fn: (value: string) => void): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: () => void): void {
    this.onTouched = fn;
  }

  setDisabledState(isDisabled: boolean): void {
    this.isDisabled = isDisabled;
    if (this.passwordInput) {
      this.passwordInput.nativeElement.disabled = isDisabled;
    }
  }

  // 输入框内容变化时触发
  onInput(event: Event): void {
    const value = (event.target as HTMLInputElement).value;
    this.onChange(value);
  }

  // 输入框失焦时标记为已触碰
  onBlur(): void {
    this.onTouched();
  }

  // 实现ErrorStateMatcher，告诉mat-form-field何时显示错误状态
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const isSubmitted = form && form.submitted;
    return !!(control && control.invalid && (control.touched || isSubmitted));
  }
}

第二步：修改模板，同步状态并添加错误提示 #

需要给mat-form-field绑定错误状态匹配器，同时给输入框添加失焦事件，还要加上mat-error显示具体错误信息。

修改后的模板代码：

<mat-form-field class="full-width {{ customClass }}" [errorStateMatcher]="this">
  <input 
    #passwordInput
    matInput 
    placeholder="{{ customPlaceholder }}" 
    [required]="required" 
    [type]="hide ? 'password' : 'text'" 
    (input)="onInput($event)"
    (blur)="onBlur()"
    [disabled]="isDisabled"
  >
  <button mat-icon-button matSuffix (click)="hide = !hide" 
          [attr.aria-label]="'Hide password'" 
          [attr.aria-pressed]="hide">
    <mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
  </button>
  <!-- 显示必填错误 -->
  <mat-error *ngIf="ngControl.control.hasError('required')">
    This field is required
  </mat-error>
</mat-form-field>

关键修复点说明 #

1. 注入NgControl：通过@Self() @Optional()注入NgControl，把组件和外部的表单控件（不管是模板驱动的ngModel还是响应式的FormControl）绑定，这样外部的验证状态能同步到组件内部。
2. 实现ErrorStateMatcher：这个接口决定了mat-form-field何时显示错误样式，我们的实现逻辑是：控件无效，且已经被触碰过或者表单已提交时，显示错误。
3. 触发onTouched：通过输入框的blur事件调用onTouched()，让表单控件标记为touched，这是触发错误样式的必要条件之一。
4. 添加mat-error：明确指定错误提示内容，配合mat-form-field的错误状态显示样式。

这样修改后，你的密码输入组件就能正常显示验证错误的样式了，不管是用模板驱动表单还是响应式表单都能生效。

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