Repository navigation
Select Element valueChanges observable fires twice every time #5284
Description
Version Alpha 46, TS
When trying to learn the various ways of working with forms I ran into an odd issue where select elements trigger change events twice for the same change when subscribed to the valueChanges observable.
If I have a function that changes the value from the model it only fires the change event once as expected.
It's pretty short so heres my code:
@Component({
selector: 'my-app',
})
@View({
template: `
<h3>Simple Select on App Component</h3>
<form>
<select [ng-form-control]="simpleSelect">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<button type="button" (click)="changeSelect()">Change Select to 3 From Model</button>
</form>
`,
directives: [FORM_DIRECTIVES]
})
export class App {
simpleSelect: Control = new Control('');
counter: number = 0;
constructor() {
//watch simple select
this.simpleSelect.valueChanges.subscribe((value)=>{
console.log("Simple Select Val:" + value + " and counter:"+this.counter)
this.counter++;
});
};
changeSelect() {
this.simpleSelect.updateValue(3);
}
}And Here is a Plunker of this in action.
I thought maybe it was something with how simple I was interfacing it so I did it with the FormBuilder and got the same results. I added a text field to see how it's changes effect the form and they work correctly (only fire once)
That Plunker Here
I'm not sure if I'm doing something incorrectly, but I think the expected behavior is the event to fire only once. I'm not experienced enough to track back whats causing the double bindings so I hoped I could have someone take a look at it...
Activity
ericmartinezr commentedon Nov 14, 2015
Related/Duplicated? #4768
fix(core/forms): input[type=text] .valueChanges fires unexpectedly
kara commentedon Apr 2, 2016
Looks like this issue should have been closed by 680f7e0. Reopen if you're still having issues?
manpuriasudip commentedon Jul 18, 2018
this issue still exists on mat-input
ZeusKnight commentedon Aug 9, 2018
+1, this still exists in mat-input as of today.
angular-automatic-lock-bot commentedon Sep 13, 2019
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.