Angular 11正则验证失效：末尾数字失焦后残留的解决方法

原代码问题分析 #

原代码存在3个核心问题：

• 语法错误：Const、If应为小写的const、if，JavaScript/TypeScript对大小写敏感
• 正则表达式错误：replace中的正则/[^a-zA-Z/g缺少闭合的]，正确写法是/[^a-zA-Z]/g
• 事件覆盖不全：仅依赖输入过程中的事件触发验证，未处理输入框失去焦点（blur）的场景，导致末尾残留的数字无法被清理

修复后的代码方案 #

方案1：修正基础验证函数并绑定全场景事件 #

先修复函数本身的错误，同时绑定input和blur事件，确保输入过程和失去焦点时都能触发验证：

inputValidatorChar(event: any) {
  const pattern = /^[a-zA-Z]*$/;
  if (!pattern.test(event.target.value)) {
    // 修正正则的闭合括号，全局替换所有非字母字符
    event.target.value = event.target.value.replace(/[^a-zA-Z]/g, '');
    // 手动触发input事件，保证Angular表单同步修正后的值
    event.target.dispatchEvent(new Event('input'));
  }
}

模板中绑定两个事件：

<input type="text" (input)="inputValidatorChar($event)" (blur)="inputValidatorChar($event)" />

方案2：使用Angular表单验证器（更推荐） #

Angular自带的表单验证机制更贴合框架规范，避免直接操作DOM的潜在问题。

模板驱动表单示例

首先定义自定义验证指令：

import { Directive } from '@angular/core';
import { NG_VALIDATORS, Validator, AbstractControl } from '@angular/forms';

@Directive({
  selector: '[appOnlyLetters]',
  providers: [{ provide: NG_VALIDATORS, useExisting: OnlyLettersDirective, multi: true }]
})
export class OnlyLettersDirective implements Validator {
  validate(control: AbstractControl): { [key: string]: any } | null {
    const valid = /^[a-zA-Z]*$/.test(control.value);
    return valid ? null : { 'onlyLetters': true };
  }
}

为了实时修正输入值，在指令中添加值变更监听：

import { Directive, OnInit } from '@angular/core';
import { NG_VALIDATORS, Validator, AbstractControl, NgModel } from '@angular/forms';

@Directive({
  selector: '[appOnlyLetters]',
  providers: [{ provide: NG_VALIDATORS, useExisting: OnlyLettersDirective, multi: true }]
})
export class OnlyLettersDirective implements Validator, OnInit {
  constructor(private ngModel: NgModel) {}

  ngOnInit() {
    this.ngModel.control.valueChanges.subscribe(value => {
      if (value && !/^[a-zA-Z]*$/.test(value)) {
        const correctedValue = value.replace(/[^a-zA-Z]/g, '');
        this.ngModel.control.setValue(correctedValue, { emitEvent: false });
      }
    });
  }

  validate(control: AbstractControl): { [key: string]: any } | null {
    const valid = /^[a-zA-Z]*$/.test(control.value);
    return valid ? null : { 'onlyLetters': true };
  }
}

模板中使用指令：

<input type="text" name="lettersInput" ngModel appOnlyLetters #lettersInput="ngModel" />
<div *ngIf="lettersInput.invalid && (lettersInput.dirty || lettersInput.touched)">
  仅允许输入英文字母
</div>

关键说明 #

• 正则修正：确保替换正则为/[^a-zA-Z]/g，可全局匹配所有非字母字符并清空
• 事件同步：手动触发input事件能让Angular表单控件同步修正后的值，避免视图与模型数据不一致
• 框架规范：使用Angular原生表单验证器，更符合响应式设计思路，也便于后续维护扩展

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