Я пытаюсь добавить директиву в мой 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 под объявлениями. Я что-то здесь упускаю, потому что я могу вводить любые алфавиты.

2
Ritesh Maharjan 20 Авг 2018 в 20:58

3 ответа

Лучший ответ

Поместите это в ваш вклад

Поместите это OnlyNumber = "true"

<input type="text" class="form-control rounded-0" placeholder="Estimated Hours"  formControlName="EstimatedHours" OnlyNumber="true">
1
Robert 21 Авг 2018 в 04:46

Используйте 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>

И если вы хотите получить значение внутри hostlistener, вам не нужно использовать привязку входного свойства, просто используйте объект $ event для получения значения

@HostListener('keydown',['$event']) onChange($event){  
  console.log($event.target.value) 
}
0
Chellappan வ 20 Авг 2018 в 18:27

Вы можете попробовать это решение

Я создал демо в 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();
        }
    }
}
1
Krishna Rathore 20 Авг 2018 в 20:17
51936181