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

Question

我有这个指令使用 hostlistener 来监听 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, '');
    }
  }

}

我想使用保存指令和另一个 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 一起使用吗？如果是这样，我可以 control/change 它的价值吗？

Answer 1

你的问题的答案是否定的，因为 HostListener 听 DOM Events 和值 passed/changed 通过 setValue 或 patchValue 不会触发任何DOM 事件的类型，因此它们不会通过您的 Directive 逻辑。

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

时的 Mask

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

HostListener works to ngModel, but not to FormControl

angular

angular-reactive-forms

angular6