输入未触发更改事件答案

【问题标题】：Input not triggering change event输入未触发更改事件
【发布时间】：2019-12-28 22:27:23
【问题描述】：

我有以下输入

<input
  id="{{options.elementId}}"
  #awesomplete
  class="c-awesomplete__input dropdown-input"
  [formControl]="control"
  [type]="customType"
  [label]="options.label"
  (click)="toggleDropdown()"
  (change)="changed($event)">

它使用了很棒的 jquery 插件。当我选择或写入一个值时，它不会触发更改的事件。而且我不知道为什么，除非我在输入组件之外单击。如果我在输入之外单击，它将触发更改。但是我希望它在我从下拉列表中选择一个值或我写一些东西时触发。

  @ViewChild("awesomplete", {static: false}) public awesompleteRef: ElementRef;
  @Input() public control: FormControl;
  @Input() public options: IAwesompleteOptions;

  public awesomplete: Awesomplete;

  constructor() { }

  ngOnInit() {
    this.control.enable();
  }

  ngAfterViewInit() {
    this.awesomplete = new Awesomplete(this.awesompleteRef.nativeElement, this.options);

  }

  public toggleDropdown(): void {
    this.awesomplete.evaluate();
    this.awesomplete.open();
  }

  public clearText(): void {
    this.control.setValue("");
  }

  public changed($event): void {
    console.log("I've changed");
  }

【问题讨论】：

标签： jquery angular input jquery-plugins

【解决方案1】：

要触发“更改”事件，元素需要失去焦点，因此当您单击其他位置时它会起作用。

为了做你想做的事，你需要给你的组件附加一个新的事件监听器。

以下是该插件可用的事件列表：https://leaverou.github.io/awesomplete/#events

据我所知，您需要收听 awesomplete-select 或 awesomplete-selectcomplete 事件。

这是该页面中的一个示例：

Awesomplete.$('.your-element').addEventListener("awesomplete-selectcomplete", function() {
    // Do something
});

【讨论】：

是的，它是这样工作的：this.awesomplete.input.addEventListener("awesomplete-selectcomplete", (event) => { this.control.setValue(event.target.value); });