Skip programmatic changes in valueChanges of Angular 2 control

Question

I'm subscribing to the valueChanges observable of an Angular 2 (2.2.1) control. It's defined in AbstractControl in @angular\forms\src\model.d.ts and it's doc string states that it will yiald changes from the UI as well as programmatic ones:

/**
 * Emits an event every time the value of the control changes, in
 * the UI or programmatically.
 */
valueChanges: Observable<any>;

How can I filter this down to give me only the changes from the UI and not the programmatic ones?

I think that the boolean props (pristine, dirty, touched, etc.) won't help me, because even after a control is marked dirty - indicating a change from the UI, which I would like to capture - there might be further programmatic changes, which I would like to ignore.

Answer 1

You can use

control.setValue(123, {emitEvent: false})

See also

• https://angular.io/docs/ts/latest/api/forms/index/AbstractControl-class.html#!#setValue-anchor
• https://github.com/angular/angular/blob/e9f307f9488e44879dc027e5f4436fb6bc046fa4/modules/%40angular/forms/src/model.ts#L669