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.

can you please post full sourcecode? not just parts from different places — Vova Bilyachat
– Vova Bilyachat, Commented Aug 30, 2017 at 12:45

Vova Bilyachat · Accepted Answer · 2017-08-30 13:03:58Z

15

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.

answered Aug 30, 2017 at 13:03

Vova Bilyachat

19.5k4 gold badges60 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Bhimisetty Over a year ago

As in the comment, the position of codes are correct position as you mentioned.

Vova Bilyachat Over a year ago

@Bhimisetty what do you mean?

Bhimisetty Over a year ago

My code is like this only this.ProfileForm.controls["code"].valueChanges.subscribe(() => { console.log("modified");}, () => { console.log("error") }, () => { console.log("completed") }); this.ProfileForm.controls["code"].setValue("someValue");

MartinJH Over a year ago

#"¤%/%#"§"! me! It's an hot observable!? Well, thanks for the help - was getting frustrated why it didn't work when it should :D

Amir Aghajani · Accepted Answer · 2020-02-13 23:42:50Z

0

It may be helpful. I have similar problem because of incorrect value set.

this.formGroup = this._formBuilder.group({
  city: [new Location()]
});

this.cityControl = this.formGroup.get('city');

this.citiesListOptions = this.cityControl.valueChanges.pipe(
  map(name => this._filterCity(name))
);

when i used this:

this.cityControl.patchValue(null);

then cityControl.valueChanges not fire again.

when i correct to this, worked:

this.cityControl.patchValue(new Location() )

answered Feb 13, 2020 at 23:42

Amir Aghajani

3872 silver badges5 bronze badges

Collectives™ on Stack Overflow

FormControl ValueChanges event not firing when setValue is called

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related