valueChanges firing multiple

src/app/public/modules/colorpicker/colorpicker-input.directive.ts

@@ -8,14 +8,18 @@ import {
   OnDestroy,
   OnInit,
   Renderer,
-  SimpleChanges
+  SimpleChanges,
+  Injector
 } from '@angular/core';
+
 import {
   AbstractControl,
   ControlValueAccessor,
   NG_VALIDATORS,
   NG_VALUE_ACCESSOR,
-  Validator
+  Validator,
+  NgControl,
+  FormControl
 } from '@angular/forms';
 
 import {
@@ -29,9 +33,11 @@ import {
 import {
   SkyColorpickerService
 } from './colorpicker.service';
+
 import {
   SkyColorpickerComponent
 } from './colorpicker.component';
+
 import {
   SkyColorpickerHsva,
   SkyColorpickerOutput
@@ -67,8 +73,14 @@ export class SkyColorpickerInputDirective
   @Input()
   public skyColorpickerInput: SkyColorpickerComponent;
 
+  /**
+   * @deprecated Use either a reactive or template driven form to set this value
+   */
   @Input()
   public set initialColor(value: string) {
+    if (!this._initialColor && !this.modelValue) {
+      this.writeValue(value);
+    }
     this._initialColor = value;
   }
 
@@ -95,7 +107,8 @@ export class SkyColorpickerInputDirective
     private elementRef: ElementRef,
     private renderer: Renderer,
     private service: SkyColorpickerService,
-    private resourcesService: SkyLibResourcesService
+    private resourcesService: SkyLibResourcesService,
+    private injector: Injector
   ) { }
 
   @HostListener('input', ['$event'])
@@ -125,7 +138,6 @@ export class SkyColorpickerInputDirective
 
     this.renderer.setElementClass(element, 'sky-form-control', true);
     this.skyColorpickerInput.initialColor = this.initialColor;
-    this.skyColorpickerInput.lastAppliedColor = this.initialColor;
     this.skyColorpickerInput.returnFormat = this.returnFormat;
 
     this.pickerChangedSubscription =
@@ -155,6 +167,7 @@ export class SkyColorpickerInputDirective
     }
 
     element.setAttribute('readonly', 'true');
+    this.renderer.setElementClass(element, 'sky-colorpicker-input', true);
   }
 
   public ngOnDestroy() {
@@ -183,7 +196,7 @@ export class SkyColorpickerInputDirective
   public registerOnValidatorChange(fn: () => void): void { this._validatorChange = fn; }
 
   public writeValue(value: any) {
-    if (value) {
+    if (value && value !== this.skyColorpickerInput.lastAppliedColor) {
       this.modelValue = this.formatter(value);
       this.writeModelValue(this.modelValue);
 
@@ -192,6 +205,10 @@ export class SkyColorpickerInputDirective
         this.skyColorpickerInput.initialColor = value;
       }
       this.skyColorpickerInput.lastAppliedColor = value;
+      let control: FormControl = (<NgControl>this.injector.get(NgControl)).control as FormControl;
+      if (control) {
+        control.setValue(this.modelValue, { emitEvent: false });
+      }
     }
   }
 
@@ -232,7 +249,6 @@ export class SkyColorpickerInputDirective
     this.renderer.setElementStyle(element, 'background-color', setElementValue);
     this.renderer.setElementStyle(element, 'color', setElementValue);
     this.renderer.setElementProperty(element, 'value', output);
-    this.renderer.setElementClass(element, 'sky-colorpicker-input', true);
   }
 
   private formatter(color: any) {
@@ -261,4 +277,5 @@ export class SkyColorpickerInputDirective
   /*istanbul ignore next */
   private _onTouched = () => { };
   private _validatorChange = () => { };
+
 }