fix: fix bug that caused control state value to not be properly set to form element if the ID of the control state changed but the state's value was the same as the last value the view reported for the previous state

Author: MrWolfZ

CHANGELOG.md

@@ -1,5 +1,12 @@
 ## Ngrx Forms Changelog
 
-<a name="August 19, 2017"></a>
-### August 19, 2017
-* Create library
+<a name="1.0.1"></a>
+### 1.0.1
+
+#### Bugfixes
+
+* fix bug that caused control state value to not be properly set to form element if the ID of the control state changed but the state's value was the same as the last value the view reported for the previous state
+
+<a name="1.0.0"></a>
+### 1.0.0
+* Initial version of the library

src/control/directive.spec.ts

@@ -64,6 +64,28 @@ describe(NgrxFormControlDirective.name, () => {
     expect(spy).not.toHaveBeenCalled();
   });
 
+  it('should write the value when the state value does not change but the id does', () => {
+    const spy = spyOn(valueAccessor, 'writeValue');
+    directive.ngrxFormControlState = { ...INITIAL_STATE, id: FORM_CONTROL_ID + '1' };
+    expect(spy).toHaveBeenCalledWith(INITIAL_STATE.value);
+  });
+
+  it('should write the value when the state value does not change but the id does after a new view value was reported', () => {
+    const newValue = 'new value';
+    onChange(newValue);
+    const spy = spyOn(valueAccessor, 'writeValue');
+    directive.ngrxFormControlState = { ...INITIAL_STATE, id: FORM_CONTROL_ID + '1', value: newValue };
+    expect(spy).toHaveBeenCalledWith(newValue);
+  });
+
+  it('should write the value when the state value does not change but the id does after an undefined view value was reported', () => {
+    const newValue = undefined as any;
+    onChange(newValue);
+    const spy = spyOn(valueAccessor, 'writeValue');
+    directive.ngrxFormControlState = { ...INITIAL_STATE, id: FORM_CONTROL_ID + '1', value: newValue };
+    expect(spy).toHaveBeenCalledWith(newValue);
+  });
+
   it('should dispatch an action if the view value changes', done => {
     const newValue = 'new value';
     onChange(newValue);

src/control/directive.ts

@@ -38,6 +38,11 @@ export class NgrxFormControlDirective<TValue extends FormControlValueTypes> impl
       throw new Error('The control state must not be undefined!');
     }
 
+    if (this.state && newState.id !== this.state.id) {
+      this.valueWasReported = false;
+      this.lastReportedViewValue = undefined as any;
+    }
+
     this.state = newState;
     this.stateSubject$.next(newState);
   }
@@ -67,6 +72,7 @@ export class NgrxFormControlDirective<TValue extends FormControlValueTypes> impl
   // types something the cursor is forced to the end of the input; to prevent this
   // behavior we compare the last reported value with the value to be set and filter out
   // those values that are equal to the last reported value
+  private valueWasReported: boolean;
   private lastReportedViewValue: TValue;
 
   constructor(
@@ -89,6 +95,7 @@ export class NgrxFormControlDirective<TValue extends FormControlValueTypes> impl
     this.valueAccessor.registerOnChange((newValue: TValue) => {
       newValue = this.convertViewValue(newValue);
       if (newValue !== this.state.value) {
+        this.valueWasReported = true;
         this.lastReportedViewValue = newValue;
         this.actionsSubject.next(new SetValueAction(this.state.id, newValue));
       }
@@ -105,7 +112,7 @@ export class NgrxFormControlDirective<TValue extends FormControlValueTypes> impl
         .map(s => ({ id: s.id, value: this.convertModelValue(s.value) }))
         .distinctUntilChanged((l, r) => l.id === r.id && l.value === r.value)
         .map(s => s.value)
-        .filter(v => v !== this.lastReportedViewValue)
+        .filter(v => !this.valueWasReported || v !== this.lastReportedViewValue)
         .subscribe(value => this.valueAccessor.writeValue(value))
     );