Question

我正在尝试在HTML中添加指令，以便允许用户仅输入数字。

这是我的指令

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

@Directive({
  selector: '[OnlyNumber]'
})

export class OnlyNumber {

  regexStr = '^[0-9]*$';
  constructor(private el: ElementRef) { }

  @Input() OnlyNumber: boolean;

  @HostListener('keydown', ['$event']) onKeyDown(event: any) {
    let e = <KeyboardEvent>event;
    if (this.OnlyNumber) {
      if ([46, 8, 9, 27, 13, 110, 190].indexOf(e.keyCode) !== -1 ||
        // Allow: Ctrl+A
        (e.keyCode == 65 && e.ctrlKey === true) ||
        // Allow: Ctrl+C
        (e.keyCode == 67 && e.ctrlKey === true) ||
        // Allow: Ctrl+V
        (e.keyCode == 86 && e.ctrlKey === true) ||
        // Allow: Ctrl+X
        (e.keyCode == 88 && e.ctrlKey === true) ||
        // Allow: home, end, left, right
        (e.keyCode >= 35 && e.keyCode <= 39)) {
        // let it happen, don't do anything
        return;
      }
      let ch = String.fromCharCode(e.keyCode);
      let regEx = new RegExp(this.regexStr);
      if (regEx.test(ch))
        return;
      else
        e.preventDefault();
    }
  }
}

我在HTML中使用了此指令。

<div class="form-group">
                  <h6>Estimated Hours</h6>
                  <input type="text" class="form-control rounded-0" placeholder="Estimated Hours"  formControlName="EstimatedHours" OnlyNumber>
                </div>

我在app.module.ts中的声明下添加了一条指令。我是否在这里缺少任何内容，因为我可以输入任何字母。

Answer 1

将此输入您的输入

将此OnlyNumber =“ true”

<input type="text" class="form-control rounded-0" placeholder="Estimated Hours"  formControlName="EstimatedHours" OnlyNumber="true">

Answer 2

使用Validator.pattern

TS

let reg = /^\d+$/;
   this.Form=new FormGroup({
     number: new FormControl('',[Validators.pattern(reg)])
   })

HTML

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-md-8 col-md-offset-2 col-sm-offset-1">
      <form [formGroup]="Form" >
         <input formControlName="number">
         <button (click)="onSubmit()">Submit</button>
        </form>
      </div>  
  </div>
</div>

如果要在hostlistner中获取值，则无需使用输入属性绑定，只需使用$ event对象获取值

@HostListener('keydown',['$event']) onChange($event){  
  console.log($event.target.value) 
}

Answer 3

您可以尝试此解决方案

我已在 stackblitz

上创建了一个演示

html代码

<div class="form-group">
    <h6>Estimated Hours</h6>
    <input type="text" class="form-control rounded-0" placeholder="Estimated Hours" formControlName="EstimatedHours" OnlyNumber>
</div>

OnlyNumber属性指令

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

@Directive({
    selector: '[OnlyNumber]'
})
export class OnlyNumberDirective {

    constructor(private el: ElementRef) { }

    @HostListener('keydown', ['$event']) onKeyDown(event: KeyboardEvent) {
        let e = <KeyboardEvent>event;
        /* 
            8 -  for backspace
            9 -  for tab
            13 - for enter
            27 - for escape
            46 - for delete
        */
        if ([8, 9, 13, 27, 46].indexOf(e.keyCode) !== -1 ||
            // Allow: Ctrl+A
            (e.keyCode === 65 && (e.ctrlKey || e.metaKey)) ||
            // Allow: Ctrl+C
            (e.keyCode === 67 && (e.ctrlKey || e.metaKey)) ||
            // Allow: Ctrl+V
            (e.keyCode === 86 && (e.ctrlKey || e.metaKey)) ||
            // Allow: Ctrl+X
            (e.keyCode === 88 && (e.ctrlKey || e.metaKey)) ||
            // Allow: home, end, left, right
            (e.keyCode >= 35 && e.keyCode <= 39)) {
            // let it happen, don't do anything
            return;
        }
        // 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();
        }
    }

    @HostListener('paste', ['$event']) blockPaste(event: KeyboardEvent) {
        this.validateFields(event);
    }
    validateFields(event) {
        let numberRegEx = /^[0-9]+$/;
        if(!numberRegEx.test(this.el.nativeElement.value)){
            this.el.nativeElement.value = "";
            event.preventDefault();
        }
    }
}

如何以角电抗形式使用指令

3 个答案: