Angular 反应性 Forms valueChanges - 仅 UI 更改

Question

The Angular FormControl has a valueChanges Observable that states:

Emits an event every time the value of the control changes, in the UI or programmatically.

Is there a way to set the FormControl to ignore programmatic value changes? (Basically the equivalent of OneWayToSource binding in .NET)

Specifically, the issue I'm facing is that my valueChanges subscription, I'm updating a bunch the values bound to a bunch of other controls, which then causes valueChanges to fire for all of them as well, which is problematic as the actions they perform in their valueChanges handlers conflicts with the control the user actually touched.

Answer 1

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

Answer 2

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;

Answer 3

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

Answer 4

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.

Answer 5

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.