Angular模板驱动表单：获取输入框实际值实现精准验证

核心问题在于：Angular对type="number"的输入框，当用户输入无法解析为合法数字的内容（比如-2、2.3、2.3-）时，会自动将ngModel绑定的control.value设为null，导致你的自定义验证器无法区分用户是真正留空还是输入了无效值。

下面提供几种可行的解决思路和重构方案：

方案一：通过ElementRef获取输入框原始值 #

直接从DOM元素中读取用户实际输入的内容，绕过Angular对control.value的处理。修改你的验证指令，注入ElementRef来获取输入框的原始value：

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

export function myValidator(elementRef: ElementRef): ValidatorFn {
  const regExp = /^\d+$/;

  return (control: AbstractControl): ValidationErrors | null => {
    // 获取输入框的原始输入内容
    const rawValue = elementRef.nativeElement.value;
    
    // 真正留空时rawValue是空字符串，允许通过
    if (rawValue.trim() === '') {
      return null;
    }
    
    // 校验是否为正整数
    return regExp.test(rawValue) ? null : { myValidator: { valid: false } };
  }
}

@Directive({
  selector: '[myDirective]',
  providers: [{
    provide: NG_VALIDATORS,
    useExisting: MyDirective,
    multi: true,
  }],
})
export class MyDirective implements Validator {
  constructor(private elementRef: ElementRef) {}

  public validate(control: AbstractControl): ValidationErrors | null {
    return myValidator(this.elementRef)(control);
  }
};

优点：改动小，直接解决问题；缺点：依赖DOM元素，若输入框被动态移除或隐藏可能受影响（一般场景下没问题）。

方案二：改用text类型输入框并自行处理数字转换 #

将输入框的type改为text，这样Angular不会自动处理输入值，你可以完全控制校验逻辑，提交时再将字符串转换为数字：

模板修改：

<input
 name="testInputField"
 id="xyz"
 type="text"
 [(ngModel)]="controllerVariable"
 myDirective/>

验证器核心逻辑保持不变，还可以添加输入限制优化用户体验，比如在指令中监听键盘输入：

// 在MyDirective中添加
import { HostListener } from '@angular/core';

@HostListener('keypress', ['$event'])
onKeyPress(event: KeyboardEvent) {
  // 只允许输入数字键及常用控制键
  const allowedKeys = ['0','1','2','3','4','5','6','7','8','9','Backspace','Delete','ArrowLeft','ArrowRight'];
  if (!allowedKeys.includes(event.key)) {
    event.preventDefault();
  }
}

优点：完全控制输入和校验逻辑，不受Angular内置数字解析的影响；缺点：需要自行处理数字转换（提交时把字符串转成number）。

方案三：通过ngModelChange捕获原始输入并存储 #

在指令中监听ngModelChange事件，捕获用户每次输入的原始值并存储，验证时使用这个存储的原始值：

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

@Directive({
  selector: '[myDirective]',
  providers: [{
    provide: NG_VALIDATORS,
    useExisting: MyDirective,
    multi: true,
  }],
})
export class MyDirective implements Validator {
  private rawValue: string = '';

  @HostListener('ngModelChange')
  onModelChange() {
    this.rawValue = this.elementRef.nativeElement.value;
  }

  constructor(private elementRef: ElementRef) {}

  public validate(control: AbstractControl): ValidationErrors | null {
    const regExp = /^\d+$/;
    
    if (this.rawValue.trim() === '') {
      return null;
    }
    
    return regExp.test(this.rawValue) ? null : { myValidator: { valid: false } };
  }
};

优点：更符合Angular响应式思路，不直接在验证器中依赖DOM；缺点：需要额外存储原始值，逻辑稍复杂。

选择哪种方案取决于你的具体场景：如果只是快速解决问题，方案一最直接；如果需要更灵活的控制，方案二更合适；如果想遵循Angular最佳实践，方案三是不错的选择。

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