Angular自定义手机号组件mat-error不触发问题求助

核心原因 #

自定义组件实现ControlValueAccessor和Validator后，内部的mat-form-field无法自动感知外部FormControl的错误状态，需要手动关联错误状态匹配逻辑。

解决方案步骤 #

1. 注入NgControl并关联值访问器 #

在组件构造函数中注入NgControl，确保组件与外部FormControl正确绑定：

import { NgControl } from '@angular/forms';
import { Self } from '@angular/core';

constructor(@Self() public ngControl: NgControl) {
  // 强制值访问器指向当前组件，避免冲突
  this.ngControl.valueAccessor = this;
}

2. 实现自定义ErrorStateMatcher #

定义错误状态匹配规则，让mat-form-field能识别外部控件的错误状态：

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

errorStateMatcher: ErrorStateMatcher = {
  isErrorState: (control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean => {
    // 判断控件是否无效且已触碰，或父控件无效且已触碰
    const invalidAndTouched = !!(control && control.invalid && control.touched);
    const parentInvalidAndTouched = !!(control?.parent && control.parent.invalid && control.parent.touched);
    return invalidAndTouched || parentInvalidAndTouched;
  }
};

3. 模板绑定ErrorStateMatcher与事件 #

在mat-form-field上绑定自定义匹配器，同时完善输入框的事件绑定：

<mat-form-field floatLabel="always" [errorStateMatcher]="errorStateMatcher">
  <mat-label>{{ "sk.entry.infoPhone" | translate }}:</mat-label>
  <input matInput id="info-phone" 
         [value]="currentValue" 
         (input)="onInputChange($event.target.value)"
         (blur)="onTouched()" />
  <mat-error>{{ "sk.entry.invalidPhone" | translate }}</mat-error>
</mat-form-field>

4. 完善ControlValueAccessor实现 #

确保值变更和触碰事件同步到外部FormControl，并手动触发验证：

currentValue: string = '';
private onChange: (value: string) => void = () => {};
private onTouched: () => void = () => {};

writeValue(value: string): void {
  this.currentValue = value || '';
}

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

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

onInputChange(value: string): void {
  this.currentValue = value;
  this.onChange(value);
  // 手动触发验证，更新错误状态
  this.ngControl.control?.markAsDirty();
  this.ngControl.control?.updateValueAndValidity();
}

5. 修正验证逻辑 #

确保验证方法基于当前控件值判断，而非内部实例的孤立状态：

validate(control: AbstractControl): ValidationErrors | null {
  // 此处替换为你的手机号校验逻辑，示例基于phoneInput实例
  if (this.phoneInput && !this.phoneInput.isValidNumber() && control.value) {
    return { "notValidNumber": true };
  }
  return null;
}

关键注意点 #

• 注入NgControl必须添加@Self()装饰器，避免循环依赖问题。
• 必须绑定(blur)事件触发onTouched()，否则控件不会标记为已触碰状态，错误提示不会显示。
• 调用updateValueAndValidity()确保验证逻辑及时执行，错误状态同步更新。

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