输入未触发更改事件 [英] Input not triggering change event

问题描述

我有以下输入内容

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

其中使用了awesomplete jQuery插件.当我选择或写入一个值时，它不会触发更改的事件.而且我不知道为什么，除非我在输入组件之外单击.如果我在输入之外单击，它将触发更改.但是，我希望一旦从下拉列表中选择一个值或编写一些内容，它便会触发.

Which uses the awesomplete jquery plugin. And when I'm selecting or writing a value, it is not triggering the changed event. And I have no idea why, unless I click outside of the input component. If I click outside the input, it will trigger the change. But I would like for it to trigger once I select a value from a dropdown or I write something.

  @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");
  }

推荐答案

要触发更改"事件，该元素需要失去焦点，因此为什么当您单击其他位置时该元素仍然有效.

To trigger the "change" event, the element needs to lose focus thus why it works when you click elsewhere.

要执行您想做的事情，您需要将新的事件侦听器附加到组件上.

In order to do what you wish, you need to attach a new event listener to your component.

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

Here is the list of events available for that plugin: https://leaverou.github.io/awesomplete/#events

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

From what I can read, you need to listen to the awesomplete-select or awesomplete-selectcomplete events.

以下是该页面的示例:

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

这篇关于输入未触发更改事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！