为什么在使用手机号码指令时 [value] 不起作用？答案

【问题标题】：Why the [value] is not working when using the directive for mobile number?为什么在使用手机号码指令时 [value] 不起作用？
【发布时间】：2022-12-04 13:03:59
【问题描述】：

I am using the directive to validate the mobile number input

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

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

  @Input()
  public value: any;

  constructor(private el: ElementRef) { }

  @HostListener(\'keypress\', [\'$event\'])
    onKeyDown(event: KeyboardEvent) {

        var inp = String.fromCharCode(event.keyCode);
        if (/[0-9]/.test(inp)) {
            return true;
        } else {
            if (event.keyCode == 8 || (event.keyCode == 43 && this.value == \'\')) {
                return true;
            } else {
                event.preventDefault();
                return false;
            }
        }
    }

}

The input field is this :

<input
       type=\"text\"
       placeholder=\"Search Mobile\"
       autocomplete=\"off\"
       [value]=\"\'1111199999\'\"
       mobileNumber
/>

here, the [value] is not working when the directive is applied but working fine without it.

标签： angular angular-material angular-directive

【解决方案1】：