Change event is not triggered with ReactiveForms

[Domantas]

Hello,

Faced an issue when using ReactiveForms and DropDownList component (this comes not only for drop down list, but also with autocomplete, combobox and others).

When changing form control value the drop down list value changes, but change event will not be fired.

I've reproduced the issue from one of your examples:

https://stackblitz.com/edit/angular-quckcr-7ci1wk?file=app.component.ts

Also, there's Cannot read property 'toString' of null error when formControl value is null

[Vignesh Srinivasan]

Hi Domantas, 

 

Greetings from Syncfusion support.   

 

Query 1: When changing form control value the drop down list value changes, but change event will not be fired. 

 

Value changed in the Initialization so the change event was not triggered, this is the intended behavior of the component.  

 

Query 2: Also, there's Cannot read property 'toString' of null error when formControl value is null 

 

The mentioned issue reproduced because inside the NgAfterViewInit method the value get updates in the setTimeout of 3000 seconds but the change event trigger before the value get updated. To get rid of the reported issue add the setTimeout second more than the second given in the value update method eg:3500. Please find the modified code below. 

 

Code snippet: 

 

ngAfterViewInit(e: any): void { 

  setTimeout(() => { 

    this.formGroup.get("test").patchValue("Game4"); 

    console.log("formControl value updated"); 

  }, 3000); 

 

  // call the change event's function after initialized the component. 

  setTimeout(() => { 

    this.onChange(e); 

  }, 3500); 

} 

 

 

Sample: https://stackblitz.com/edit/angular-quckcr-rr2avf?file=app.component.ts 

 

Kindly check with the above sample. Please let us know if you need any further assistance. 

 

Regards, 

 

Vignesh Srinivasan.  

 

[Domantas]

Hello,

Value changed in the Initialization so the change event was not triggered, this is the intended behavior of the component.

I'm not sure what do you mean by this. I've changed value after 3 seconds, so you shouldn't interpret it as "Initialization" value.

I did another example without any timeouts but with button:

https://stackblitz.com/edit/angular-quckcr-pqq4u3?file=app.component.ts

Will you agree with me that after every button click (value change) the DropDownList "Change" event should be fired ?

[Berly Christopher]

Hi Domantas, 

  

Thanks for sharing information.  

  

We would like to inform you that, while changing the model dynamically with help of patchValue method the change event will not be fired. Please find the details for the same in the below GitHub link. 

  

https://github.com/ng-select/ng-select/issues/1335 

  

Regards, 

Berly B.C 

[Domantas]

Hello,

I got your point. Then in this case I need some sort of guide how this should work with form control correctly.

There would be two cases where I have to track changes. DropDownList.change event and my formControl.valueChanges event.

1) When you select drop down list value it triggers the drop down list change event and patches value into formControl

2) When we patch formControl value it changes form control value but it doesn't fire the change event (as you mentioned it is intended)

However, if I want to track programmatically changed value (let's say I got value from database and I patched it) in this case I need to track formControl.valueChanges and then emit by hand drop down list change event  ?

If I do the approach mentioned above, then when I select value by interaction, the change event will fire twice: one by default drop down list functionality and one that I wrote in formControl.valueChanges

https://stackblitz.com/edit/angular-quckcr-scl4z1?file=app.component.ts

[Vignesh Srinivasan]

Hi Domantas, 

 

Query 1: if I want to track programmatically changed value (let's say I got value from database and I patched it) in this case I need to track formControl.valueChanges and then emit by hand drop down list change event ? 

 

Yes, if you want to track the formControl value change you need it call the change event on form value change. 

 

Query 2: If I do the approach mentioned above, then when I select value by interaction, the change event will fire twice: one by default drop down list functionality and one that I wrote in formControl.valueChanges. 

 

We have added condition in change event to prevent the twice change event trigger in value change. Please find the code below. 

 

public onChange(args: any): void { 

        if (isNullOrUndefined(args.e)) { 

          console.log("change event", args); 

          let value: Element = document.getElementById("value"); 

          let text: Element = document.getElementById("text"); 

          // update the text and value property values in property panel based on selected item in DropDownList 

          value.innerHTML = this.listObj.value.toString(); 

          text.innerHTML = this.listObj.text; 

     

          this.valueEmitterForParent.emit(args.itemData.Id); 

        } 

      } 

 

 

Sample: https://stackblitz.com/edit/angular-quckcr-w62pzm?file=app.component.ts 

 

Kindly check with above sample. Please let us know if you need any further assistance. 

 

Regards, 

 

Vignesh Srinivasan