时间戳

首页 > 解决方案 > 无法在 Angular 中使用自动完成字段执行更改事件

javascript - 无法在 Angular 中使用自动完成字段执行更改事件

问题描述

我正在使用自动完成字段来填充值。我在表达式属性中使用了 templateOptions.change 来设置其他字段的值，但我注意到只有在取消选择自动完成的值时才会调用 change 事件。当我试图从自动完成更改事件中选择值时，不会调用。

我创建了一个 stackblitz 链接来实现我的要求，我注意到更改事件仅在我们更改自动完成下拉列表的值后调用，如果它是空白的，然后我们选择任何不调用更改事件的值。我想知道是否有 onselect of dropdown 而不是 change 事件的选项。我也尝试将钩子与模板选项一起使用，但没有成功，如果有人可以提供帮助，那将很有帮助。谢谢

请找到此链接：https ://stackblitz.com/edit/angular-bf6g6m-6twrjw

第一步：

当我从自动完成下拉列表中选择第一个值时：观察是没有更改事件被调用

在此处输入图像描述

第二步：

现在，当我从下拉列表中选择另一个值时：观察是更改事件被调用。

在此处输入图像描述

标签： javascriptangularngx-formly

解决方案

使用 formly 和 ng-prime 的自动完成更改事件无法按预期工作。我尝试使用 onSelect 效果很好，并且事件的行为符合预期。

请在下面找到以下代码，只需在使用 autocomplete、formly、primeng 和 angular 时将 change 事件替换为 onSelect。

在正式的自动完成组件中： （Ng-prime formly）

(onSelect)="to.onValueSelect(field,$event)"

在自动完成字段中使用 onSelect

    fields: FormlyFieldConfig[] = [
    { 
      key: 'Autocomplete',
      type: 'autocomplete',
      templateOptions: {
      required: true,
      label: 'Autocomplete',
      placeholder: 'Placeholder',
      filter: (term) => of(term ? this.filterStates(term) : states.slice()),
      onValueSelect: (field, $event) => { //call the onSelect event 
      console.log('----->select event called')
    }
  },
   
  
   
},`

推荐阅读