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

我有这个指令，它利用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, '');
    }
  }

}

我想使用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一起使用吗？如果可以，我可以控制/更改它的值吗？

最佳答案

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

就我而言，我选择使用指令并在组件内部手动创建Mask，因此可以在发生input事件时继续监听它们，并且在使用Mask时也可以应用setValue或patchValue。

关于angular - HostListener适用于ngModel，但不适用于FormControl，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51403070/