输入未触发更改事件

Posted 2023-05-09

【中文标题】输入未触发更改事件

【英文标题】：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");
  

【参考方案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); );