может извинять функцию при изменении значения ввода

Question

Я создаю эту директиву для поиска, когда значение ввода было изменено на что-то.

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[ktCloseDatePciker]'
})
export class CloseDatePcikerDirective {


  constructor() { }
  @HostListener('change', ['$event'])
  click(event) {
    console.log('clicked!');
  }

}

и используйте это в html следующим образом:

                <input #dateDirectivePicker="dpDayPicker" ktCloseDatePciker (change)="close()" formControlName="Publish_CalendarDate" id="date-lrt" theme="dp-material" matInput mode="daytime" [dpDayPicker]="datePickerConfigStart" />

, но это не сработало, когда я изменяю значение, оно не может написать консоль в сокращенном виде.

в чем проблема? как можно решить эту проблему?

Answer 1

Вам нужно использовать событие onChange вместо изменения, чтобы получить изменения выбора. и нужно использовать событие закрытия, когда сборщик закрыт.

для изменений:

 <input #dateDirectivePicker="dpDayPicker" ktCloseDatePciker (onChange)="close()" formControlName="Publish_CalendarDate" id="date-lrt" theme="dp-material" matInput mode="daytime" [dpDayPicker]="datePickerConfigStart" />

при закрытии сборщика:

<input #dateDirectivePicker="dpDayPicker" ktCloseDatePciker (close)="close()" formControlName="Publish_CalendarDate" id="date-lrt" theme="dp-material" matInput mode="daytime" [dpDayPicker]="datePickerConfigStart" />

Answer 2

Измените имя события с 'change' на 'input', пример :

directive

import { Directive, HostListener } from "@angular/core";

@Directive({
  selector: "[ktCloseDatePciker]"
})
export class CloseDatePcikerDirective {
  constructor() {}
  @HostListener("input", ["$event"])
  input(event) {
    console.log("typed!" + event.target.value);
  }
}

template

<input ktCloseDatePciker (change)="close()"/>

Событие 'change' запускается, когда вход теряет фокус, как это и предполагалось ( ref ):

Событие ввода MDN:

Примечание : событие ввода запускается каждый раз, когда изменяется значение элемента. Это не похоже на событие изменения, которое срабатывает только при фиксации значения, например, при нажатии клавиши ввода, выборе значения из списка параметров и т. П.