Я получаю сообщение об ошибке, когда я использую «ключ» вместо «keyCode» с «KeyboardEvent» в угловом - PullRequest
Новая
       37

Я получаю сообщение об ошибке, когда я использую «ключ» вместо «keyCode» с «KeyboardEvent» в угловом

2 голосов
/ 11 октября 2019



Я пытаюсь создать пользовательскую директиву для поля ввода (текстовое поле) так, чтобы она принимала только цифры, а не буквы алфавита.

У меня есть следующий (only-numbers.directive.ts) файл : 

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

@Directive({
  selector: "[onlyNumbers]"
})
export class OnlyNumbersDirective {
  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();
    }
  }

}


Код выше работает нормально, но я знал,что « keyCode » устарел, поэтому я пытаюсь использовать вместо него « key », но получаю следующие ошибки:

Аргумент типа'string' не может быть назначен параметру типа 'number'. (снимок экрана)

Это условие всегда будет возвращать «ложь», поскольку типы «строка» и «65» не перекрываются. (скриншот)


Итак, мой вопрос, как мне это исправить?

Заранее спасибо

1 Ответ

1 голос
/ 13 октября 2019

Я использовал это решение, как указал Элисео, и оно работало очень хорошо https://stackoverflow.com/a/54462816/6663458

Спасибо, Eliseo

...