时间戳

首页 > 解决方案 > Angular：如何使用指令在文本框中只允许整数

angular - 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();  
  }

}

<input type="text" ngModel numbersOnly>

但是用户仍然可以输入。

我也试过了，event.preventDefault();但也没有用。我究竟做错了什么？

堆栈闪电战

标签： angular

解决方案

你错过了重要的代码:)

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

指令 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();
    }
  }
}

Forked_Stackblitz

推荐阅读