javascriptangularngx-formly

Not able to perform change event with autocomplete field in Angular formly


I am using autocomplete field, to populate the values. I have used templateOptions.change in expression properties to set value of other field, but i have noticed that change event is called only when the value of autocomplete is deselected. when i am trying to select the value from autocomplete change event is not called.

I have created a stackblitz link to achieve my requirement, I am noticing that change event only calls after we change the value of autocomplete dropdown, and if it is blank and then we select any value it doesn't call the change event. I want to know whether there is an option for onselect of dropdown rather than the change event. I tried using the hooks too with the template option but didn't work out, it will be helpful if anyone can assist on this. Thank you

Please find this link: https://stackblitz.com/edit/angular-bf6g6m-6twrjw

First Step:

When i select first value from autocomplete dropdown: Observation is no change event is called

enter image description here

Second Step:

Now when i select the other value from dropdown: Observation is change event is called.

enter image description here


Solution

  • change event doesn't work as desired with autocomplete using formly and ng-prime. I tried using onSelect which works fine and the behavior of the event is as desired.

    Please find below the following code, just replace change event with onSelect on using autocomplete, formly, primeng and angular.

    In formly autocomplete component: (Ng-prime formly)

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

    While consuming onSelect in autocomplete field

        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')
        }
      },
       
      
       
    },`