javascript - Angular 6 event.stopPropagation() 在指令中不起作用(模板驱动形式已经采用 event.data)

Question

我正在尝试制作一个用于表单的 citizenNumber 组件。它为 ngModel 实现了 ControlValueAccessor。

export class CitizenNumberComponent implements ControlValueAccessor {
    private _value: string;
    @Input() placeholder = '';
    @Input() required = true;

    get value(): string {
        return this._value;
    }

    set value(value: string) {
        this._value = value;
        this.propagateChange(value);
    }

    // registers 'fn' that will be fired when changes are made
    // this is how we emit the changes back to the form
    registerOnChange(fn: any): void {
        this.propagateChange = fn;
    }

    // not used, used for touch input
    registerOnTouched(fn: any): void { }

    // this is the initial value set to the component
    writeValue(value: string): void {
        if (value) {
        this._value = value;
        }
    }

    // the method set in registerOnChange to emit changes back to the form
    propagateChange = (_: any) => { };
    }

我制作了一个 NumberDirective 来限制除 0-9 数字以外的输入。

在 numberDirective 中，我使用了“输入”事件，因为 keypress、keydown 和 keyup 在 android chrome 中不起作用。

@Directive({
    selector: 'input[jhiNumbersOnly]'
})
export class NumberDirective {
    private specialKeys: Array<string> = ['Backspace', 'Delete', 'Insert', 'Tab', 'End', 'Home', 'ArrowRight', 'ArrowLeft'];

    @HostListener('input', ['$event']) onInput(event) {
        const key = event['data'];
        // Allow Backspace, tab, end, and home keys
        if (this.specialKeys.indexOf(key) !== -1) {
            return;
        }
        const initalValue = event.target['value'];
        event.target['value'] = initalValue.replace(/[^0-9]*/g, '');
        if (initalValue !== event.target['value']) {
            event.stopPropagation();
        }
    }
}

最后，一切正常，但尽管事件已停止，但模型会取值。

例如，我输入的最大长度是 11。在输入 10 个数字后，如果输入了某些键(0-9 除外)表单将生效。

查看 stackblitz 中的组件;

你能帮我解决我的问题吗？

Answer 1

你应该更换你的 input keydown 处理程序处理程序。然后如果 key 是好的，什么也不做，否则，阻止事件发生。

问题是如果你监听输入事件，那就来不及了，ngModel会一直更新，所以你要听keydown事件并适本地过滤它。

@HostListener('keydown', ['$event']) onKeyDown(e: KeyboardEvent) {
  if (this.specialKeys.indexOf(e.key) !== -1 || new RegExp(/[0-9]/g).test(e.key)) {
      return;
  }
  e.preventDefault();
}

我在您的 stackblitz 演示中测试了这段代码，它有效。

编辑:您提到您不能使用按键处理程序，抱歉。

我设法让它与 oninput 一起工作<input> 上的处理程序元素，我在输入中删除了你的指令:

<div class = "form-group">
  <label class = "form-control-label label-color" for = "citizenNumber">Citizen Number
  </label>
  <input type = "text" 
          class = "form-control input-css" 
          name = "citizenNumber"
          id = "citizenNumber"
          #citizenNumber="ngModel"
          oninput="this.value = this.value.replace(/[^0-9]/g, '');"
          [(ngModel)] = "value"
          [placeholder] = "placeholder"
          minlength = "11"
          maxlength = "11"
          [required] = "required">
  <div *ngIf = "citizenNumber.invalid && (citizenNumber.dirty || citizenNumber.touched)"
      class = "form-text text-danger">
      <small *ngIf = "citizenNumber.errors.required">This field is required.</small>
      <small *ngIf = "citizenNumber.errors.minlength">This field must be 11 characters.</small>
      <small *ngIf = "citizenNumber.errors.invalidTc">This is not a citizen number</small>
  </div>
</div>

Here is an updated Stackblitz.

希望对您有所帮助!