Question

上下文：我正在尝试为输入类型编号创建一个指令，它不允许用户在输入中键入除数字以外的任何字符，我想我不是很远但是指令不像预期的那样。

预期行为：当用户输入数字时，数字保持不变，数字会保留在输入中，但如果他输入字母，字母会自动删除，只保留数字。

当用户键入数字时，Firefox和Safari（在Chrome上运行良好）

目前行为可以正常但是只要他输入一个字母，所有输入的内容都会被删除，甚至是之前输入的数字

复制方案：我有stackblitzed这种情况，你可以在输入中输入数字就可以了，然后当你输入字母时，输入就会被删除。

代码：

import { Directive, ElementRef, Renderer2 } from '@angular/core';
import { DefaultValueAccessor } from '@angular/forms';

@Directive({
  selector: 'input[type=number]',
  host: {
    '(input)': 'onInput($event.target.value)'
  },
})

export class NumberDirective extends DefaultValueAccessor {

  constructor(renderer: Renderer2, elementRef: ElementRef) { super(renderer, elementRef, false); }

  onInput(value: any): void {
    const transformed = this.transformValue(value);
    super.writeValue(transformed);
    this.onChange(transformed);
  }

  private transformValue(value: any): any {
    return value.replace(/[^0-9|\s]+/g, '');
  }
}

问题：

如何让此指令生效？
我的IDE抱怨说因为使用主机元数据不尊重style guide Style 06-03而我应该使用HostListener / HostBinding装饰器。如果你帮我使用HostListener和我的指令，你就像我的超级英雄，因为我根本不知道如何使用HostListener。

为什么这个Angular 4指令不能按预期工作

0 个答案: