Angular 角度：如何使用指令在文本框中只允许整数

我正在尝试创建我的第一个指令。我想要的是简单地防止在文本字段上键入内容

这就是我尝试过的：

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

@Directive({
  selector: 'input[numbersOnly]'
})
export class NumberDirective {

  constructor(private _el: ElementRef) { }

  @HostListener('input', ['$event']) onInputChange(event) {
    event.stopPropagation();  
  }

}

但是用户仍然能够键入

我还用

event.preventDefault（）尝试了它但这也不起作用。我做错了什么

您必须收听按键按下事件：

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

@Directive({
  selector: '[appNumbersOnly]'
})
export class NumbersOnlyDirective {

  constructor(private _el: ElementRef) { }

@HostListener('keydown', ['$event'])
  onKeyDown(e: KeyboardEvent) {
    if (
      // Allow: Delete, Backspace, Tab, Escape, Enter
      [46, 8, 9, 27, 13].indexOf(e.keyCode) !== -1 || 
      (e.keyCode === 65 && e.ctrlKey === true) || // Allow: Ctrl+A
      (e.keyCode === 67 && e.ctrlKey === true) || // Allow: Ctrl+C
      (e.keyCode === 86 && e.ctrlKey === true) || // Allow: Ctrl+V
      (e.keyCode === 88 && e.ctrlKey === true) || // Allow: Ctrl+X
      (e.keyCode === 65 && e.metaKey === true) || // Cmd+A (Mac)
      (e.keyCode === 67 && e.metaKey === true) || // Cmd+C (Mac)
      (e.keyCode === 86 && e.metaKey === true) || // Cmd+V (Mac)
      (e.keyCode === 88 && e.metaKey === true) || // Cmd+X (Mac)
      (e.keyCode >= 35 && e.keyCode <= 39) // Home, End, Left, Right
    ) {
      return;  // let it happen, don't do anything
    }
    // Ensure that it is a number and stop the keypress
    if (
      (e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) &&
      (e.keyCode < 96 || e.keyCode > 105)
    ) {
      e.preventDefault();
    }
  }

}

从'@angular/core'导入{指令，HostListener，ElementRef}；
@指示({
选择器：“[appNumbersOnly]”
})
导出类编号仅直接{
构造函数（私有_el:ElementRef）{}
@HostListener（'keydown'，['$event']））
onKeyDown（e:键盘事件）{
如果(
//允许：删除、退格、制表符、转义、输入
[46,8,9,27,13].indexOf（e.keyCode）！==-1 |
（e.keyCode==65&&e.ctrlKey==true）|///Allow:Ctrl+A
（e.keyCode==67&&e.ctrlKey==true）|///Allow:Ctrl+C
（e.keyCode==86&&e.ctrlKey==true）|///Allow:Ctrl+V
（e.keyCode==88&&e.ctrlKey==true）| |//允许：Ctrl+X
（e.keyCode==65&&e.metaKey==true）| |//Cmd+A（Mac）
（e.keyCode==67&&e.metaKey==true）| |//Cmd+C（Mac）
（e.keyCode==86&&e.metaKey==true）| |//Cmd+V（Mac）
（e.keyCode==88&&e.metaKey==true）| |//Cmd+X（Mac）
（e.keyCode>=35&&e.keyCode您必须收听keyDown事件：

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

@Directive({
  selector: '[appNumbersOnly]'
})
export class NumbersOnlyDirective {

  constructor(private _el: ElementRef) { }

@HostListener('keydown', ['$event'])
  onKeyDown(e: KeyboardEvent) {
    if (
      // Allow: Delete, Backspace, Tab, Escape, Enter
      [46, 8, 9, 27, 13].indexOf(e.keyCode) !== -1 || 
      (e.keyCode === 65 && e.ctrlKey === true) || // Allow: Ctrl+A
      (e.keyCode === 67 && e.ctrlKey === true) || // Allow: Ctrl+C
      (e.keyCode === 86 && e.ctrlKey === true) || // Allow: Ctrl+V
      (e.keyCode === 88 && e.ctrlKey === true) || // Allow: Ctrl+X
      (e.keyCode === 65 && e.metaKey === true) || // Cmd+A (Mac)
      (e.keyCode === 67 && e.metaKey === true) || // Cmd+C (Mac)
      (e.keyCode === 86 && e.metaKey === true) || // Cmd+V (Mac)
      (e.keyCode === 88 && e.metaKey === true) || // Cmd+X (Mac)
      (e.keyCode >= 35 && e.keyCode <= 39) // Home, End, Left, Right
    ) {
      return;  // let it happen, don't do anything
    }
    // Ensure that it is a number and stop the keypress
    if (
      (e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) &&
      (e.keyCode < 96 || e.keyCode > 105)
    ) {
      e.preventDefault();
    }
  }

}

从'@angular/core'导入{指令，HostListener，ElementRef}；
@指示({
选择器：“[appNumbersOnly]”
})
导出类编号仅直接{
构造函数（私有_el:ElementRef）{}
@HostListener（'keydown'，['$event']））
onKeyDown（e:键盘事件）{
如果(
//允许：删除、退格、制表符、转义、输入
[46,8,9,27,13].indexOf（e.keyCode）！==-1 |
（e.keyCode==65&&e.ctrlKey==true）|///Allow:Ctrl+A
（e.keyCode==67&&e.ctrlKey==true）|///Allow:Ctrl+C
（e.keyCode==86&&e.ctrlKey==true）|///Allow:Ctrl+V
（e.keyCode==88&&e.ctrlKey==true）| |//允许：Ctrl+X
（e.keyCode==65&&e.metaKey==true）| |//Cmd+A（Mac）
（e.keyCode==67&&e.metaKey==true）| |//Cmd+C（Mac）
（e.keyCode==86&&e.metaKey==true）| |//Cmd+V（Mac）
（e.keyCode==88&&e.metaKey==true）| |//Cmd+X（Mac）
（e.keyCode>=35&&e.keyCode您缺少重要代码：）

您忘记检查有效输入，因此可以使用正则表达式允许整数：

指令TS代码：

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

@Directive({
  selector: 'input[numbersOnly]'
})
export class NumbersOnlyDirective {

  constructor(private _el: ElementRef) { }

  @HostListener('input', ['$event']) onInputChange(event) {    
    const val = this._el.nativeElement.value;
    this._el.nativeElement.value = val.replace(/[^0-9]*/g, '');
    if (val !== this._el.nativeElement.value) {
      event.stopPropagation();
    }
  }
}

您缺少重要代码：）

您忘记检查有效输入，因此可以使用正则表达式允许整数：

指令TS代码：

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

@Directive({
  selector: 'input[numbersOnly]'
})
export class NumbersOnlyDirective {

  constructor(private _el: ElementRef) { }

  @HostListener('input', ['$event']) onInputChange(event) {    
    const val = this._el.nativeElement.value;
    this._el.nativeElement.value = val.replace(/[^0-9]*/g, '');
    if (val !== this._el.nativeElement.value) {
      event.stopPropagation();
    }
  }
}

请在复制他人代码时包括您的来源（例如）。请在复制他人代码时包括您的来源（例如）。可能重复的可能重复的