FormControl ValueChanges event not firing when setValue is called

Question

I have the following code for an Angular 4 type-ahead component: There is a FormControl in the FormGroup which is tied with the html and it works perfectly.

this.ProfileForm.controls["code"]

The valueChanges event is firing when i change in the textbox. Now when i update the formcontrol value through programatically the valueChanges event is not firing. The following is the lines of code i written.

this.ProfileForm.controls["code"].setValue("someValue");

this.ProfileForm.controls["code"].valueChanges.subscribe(() => {
            console.log("modified");}, () => { console.log("error") }, () => { console.log("completed") });

Any suggestion is appreciated.

Answer 1

Change it to subscribe first and then setValue

this.ProfileForm.controls["code"].valueChanges.subscribe(() => {
            console.log("modified");}, () => { console.log("error") }, () => { console.log("completed") });

this.ProfileForm.controls["code"].setValue("someValue");

Because in your code you are changing value while you are not yet subscribed.