Почему событие изменения не работает для ввода? - PullRequest
Новая
       15

Почему событие изменения не работает для ввода?

2 голосов
/ 31 октября 2019

У меня есть следующий элемент ввода: 

 <input
        range
        [btnClass]="'close_input_button'"
        type="text"
        class="reset-border-right"
        formControlName="parentId1Name"
      />

Как вы можете видеть, я использую директиву: 

 range [btnClass]="'close_input_button'"

Директива выглядит так: 

@Directive({
  selector: "[range]"
})
export class RangeDirective implements OnInit {
   @HostListener("change", ["$event"]) ngOnChanges(value: any) {
    console.log(value);
  }
}

Почемукогда я устанавливаю новое значение для ввода, используя реактивную форму, оно вызывает событие изменения в директиве? 

this.form.get("parentId1Name").setValue('New value');

Полная директива: 

import {
  Input,
  HostListener,
  OnInit,
  OnChanges,
  SimpleChanges
} from "@angular/core";
import { Renderer2 } from "@angular/core";
import { ElementRef } from "@angular/core";
import { Directive } from "@angular/core";

@Directive({
  selector: "[range]"
})
export class RangeDirective implements OnInit, OnChanges {
  constructor(private elementRef: ElementRef, private renderer: Renderer2) {}

  readonly _elements = ["INPUT", "SELECT", "TEXTAREA"];
  private newDomElement: any;

  @Input() btnClass: string;
  @Input() model: any;
  @Input() position: string = "right";

  ngOnInit(): void {
    const parent = this.elementRef.nativeElement.parentNode;
    const reference = this.elementRef.nativeElement;

    this.elementRef.nativeElement.parentNode.style.position = "relative";
    this.newDomElement = this.createButton();
    this.renderer.insertBefore(parent, this.newDomElement, reference);
  }

  @HostListener("keyup", ["$event"]) ngKeyup(value: any) {
    this.eventHandler(value);
  }

  @HostListener("change", ["$event"]) ngChange(value: any) {
    this.eventHandler(value);
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes.input) {
      console.log("input changed");
    }
  }

  eventHandler(value: any) {
    if (!value.srcElement) return;
    const _value = value.srcElement.value.toString().trim();
    if (_value) {
      this.newDomElement.style.display = "flex";
    } else {
      this.newDomElement.style.display = "none";
    }
  }

  createButton() {
    let closeButton = document.createElement("div");
    closeButton.innerHTML = '<i class="material-icons">clear</i>';
    closeButton.className = this.btnClass;
    closeButton.className += " " + this.position;
    closeButton.style.display = "none";
    closeButton.onclick = () => {
      closeButton.style.display = "none";
      this.elementRef.nativeElement.value = null;
    };

    return closeButton;
  }

}

1 Ответ

3 голосов
/ 31 октября 2019

Вам необходимо создать свойство input для input, а затем использовать хук ngOnChanges, чтобы сообщить об изменении свойства input. 

@Directive({
    selector: '[range]'
})
export class RangeDirective implements OnChanges {
    @Input() public range: any;
    @Input() public input: any;

    ngOnChanges(changes: SimpleChanges){
      if(changes.input){
        console.log('input changed');
      }
    }
}
...