Programmatic change of underlying ngModel dirties the control's state

[Deilan]

Programmatic change (not user interaction with the control) of underlying ngModel (which the control binds to) dirties the control's state and enclosing form's state. User interaction should dirty the control's state, but programmatic change shouldn't

[hisham]

+1. I think I'm running into this. Any solutions?

[hisham]

It seems the problem is in the writeValue method. set() is being called which triggers a Set event callback (https://refreshless.com/nouislider/events-callbacks/) which then calls the eventHandler which calls the ControlValueAccessor onChange methods.

onChange should not be called when set() is called.

[hisham]

This can be solved by modifying the writeValue method as follows:

writeValue(value: any) {
      if (this.slider) {
        setTimeout(() => {
          **this.value = value;**
          this.slider.set(value);
        });
      }
    };

The change is in bold. I did try to do a fork and make a PR but the tests fail with this code for some reason. Though everything is working fine in my project. I ended up just overriding writeValue through a directive with the approach detailed in https://blog.angularindepth.com/changing-the-behavior-of-a-3rd-party-angular-component-91f84fb9af28