Angular Reactive Forms valueChanges - UI changes only

You can skip emitting the valueChange event by passing the option { emitEvent: false } to the setValue call.

setValue(value: any, options: {
    onlySelf?: boolean;
    emitEvent?: boolean;
    emitModelToViewChange?: boolean;
    emitViewToModelChange?: boolean;
} = {}): void

Also you might want to take a look at other options.

If onlySelf is true, this change will only affect the validation of this FormControl and not its parent component. This defaults to false.

If emitEvent is true, this change will cause a valueChanges event on the FormControl to be emitted. This defaults to true (as it falls through to updateValueAndValidity).

If emitModelToViewChange is true, the view will be notified about the new value via an onChange event. This is the default behavior if emitModelToViewChange is not specified.

If emitViewToModelChange is true, an ngModelChange event will be fired to update the model. This is the default behavior if emitViewToModelChange is not specified.

Docs

You can pass { emitEvent: false } as options for the below reactive form methods to prevent them from triggering the valueChanges event

this.form.patchValue(value, { emitEvent: false })

this.form.setValue(value, { emitEvent: false })

this.form.controls.email.updateValueAndValidity({ emitEvent: false })

this.form.disable({ emitEvent: false })

yes disable triggers the valueChanges event

PS: above this.form is a reactive form

Read this excellent post, it'll answer all your questions and even give some great insights on reactive forms:

https://netbasal.com/angular-reactive-forms-tips-and-tricks-bb0c85400b58

That may be helpful:

    yourControl.valueChanges.pipe(
        filter(() => yourControl.touched)
    ).subscribe(() => {
       ....
    })

It will fire only if control was previously touched. It doesnt fix all the issues, but may solve some cases.

The reactive form group have property yourFormName.pristine

You can use !yourFormName.pristine to detect only UI changes

 * A control is `pristine` if the user has not yet changed
 * the value in the UI.
 *
 * @returns True if the user has not yet changed the value in the UI; compare `dirty`.
 * Programmatic changes to a control's value do not mark it dirty.
 */
readonly pristine: boolean;

I could do it by putting this listener on the html file:

<ss-multiselect-dropdown ... (ngModelChange)="functionToTrigger($event)"></ss-multiselect-dropdown>

And on the .ts file:

functionToTrigger($event) {
    if (event === undefined) {
        // Put here are the instructions for UI changes
    } else {
        // Put here are the instructions for programmatic changes
}

I really don't know why it works this way. I came to this solution by trial and error.