angular - HostListener 适用于 ngModel，但不适用于 FormControl

Question

我有这个指令，利用主机监听器来监听 ngModelChange 来控制输入文本。我打算使用相同的指令来控制在 FormGroup/FormControl 输入上键入的文本。

指令

import { Directive, Output, EventEmitter, HostListener, ElementRef } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
  selector: '[ngModel][appPureName]'
})
export class PureNameDirective {
  constructor(private el: ElementRef, private control: NgControl) {}

  @HostListener('ngModelChange')
  onModelChange() {
    if (this.el.nativeElement.value) {
      this.el.nativeElement.value = this.el.nativeElement.value.replace(/\s/g, '');
    }
  }

}

我想使用 save 指令和另一个 HoSTListener 来控制文本，就像我对 ngModel 输入所做的那样。

我尝试实现上面的例子，但它不起作用。

 @HostListener('input',['$event']) onEvent($event){
    let valueToTransform = this.el.nativeElement.value;
    // do something with the valueToTransform
    this.control.control.setValue(valueToTransform);
  }

真正的问题是:我可以将 HostListener 与 formControlName 一起使用吗？如果是这样，我可以控制/更改它的值吗？

Answer 1

您的问题的答案是否定的，因为 HostListener 监听 DOM 事件 以及通过 setValue 或 patchValue 传递/更改的值 不会触发任何类型的 DOM 事件，因此它们不会通过您的 Directive 逻辑。

在我的例子中，我选择使用指令并在组件内手动创建Mask，因此可以在input事件发生时继续监听它们，并且能够在使用 setValue 或 patchValue 时应用 Mask。