Angular手机号验证指令生效时[value]属性失效问题求助

你的自定义指令中声明了@Input() value，这会和原生<input>元素的value属性产生命名冲突。Angular处理绑定时，会优先将[value]的值绑定到指令的value输入属性上，而非设置到input元素的原生value属性，这就导致初始值无法正常显示。

移除指令中同名的@Input() value，改为直接通过ElementRef获取input元素的当前值：

修改后的指令代码：

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[mobileNumber]'
})
export class MobileNumberDirective {

  constructor(private el: ElementRef) { }

  @HostListener('keypress', ['$event'])
  onKeyDown(event: KeyboardEvent) {
    const inp = String.fromCharCode(event.keyCode);
    if (/[0-9]/.test(inp)) {
      return true;
    } else {
      // 直接获取input元素的当前value
      const currentValue = this.el.nativeElement.value;
      if (event.keyCode === 8 || (event.keyCode === 43 && currentValue === '')) {
        return true;
      } else {
        event.preventDefault();
        return false;
      }
    }
  }
}

修改后，[value]的初始值会正常绑定到input元素的原生value属性，同时指令的验证逻辑也能正常工作——因为现在是直接从DOM元素获取当前值，而非依赖同名的输入属性。

如果使用Angular表单（如ngModel或响应式表单），更推荐结合表单控件的value做判断，而非直接操作DOM元素，这更符合Angular的最佳实践，比如注入NgControl来获取控件值，但当前场景下，直接通过ElementRef获取DOM值已能解决问题。

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