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, '');
    }
  }

}

我想使用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 Events，并且通过setValue或patchValue传递/更改的值不会触发任何类型的DOM事件，因此它们不会通过您的Directive逻辑。

在我的情况下，我选择使用伪指令并在组件内部手动创建Mask，因此可以在发生input事件时继续监听它们，并可以应用{使用Mask或setValue时使用{1}}。

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

1 个答案: