fix: add support for ngValue on option elements, thereby fixing non-string option values not working for select elements

Author: MrWolfZ

CHANGELOG.md

@@ -1,5 +1,12 @@
 ## Ngrx Forms Changelog
 
+<a name="1.0.2"></a>
+### 1.0.2
+
+#### Bugfixes
+
+* add support for `ngValue` on `option` elements, thereby fixing non-string option values not working for `select` elements
+
 <a name="1.0.1"></a>
 ### 1.0.1
 

src/control/e2e.spec/select.spec.ts

@@ -1,5 +1,5 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { Component, Input } from '@angular/core';
+import { Component, Input, getDebugNode } from '@angular/core';
 import { ActionsSubject, Action } from '@ngrx/store';
 import { Observable } from 'rxjs/Observable';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@@ -9,6 +9,7 @@ import 'rxjs/add/operator/skip';
 import { FormControlState, createFormControlState } from '../../state';
 import { SetValueAction } from '../../actions';
 import { NgrxFormsModule } from '../../module';
+import { NgrxSelectControlValueAccessor } from '../../value-accessors';
 
 const SELECT_OPTIONS = ['op1', 'op2'];
 
@@ -25,12 +26,13 @@ export class SelectComponent {
 describe(SelectComponent.name, () => {
   let component: SelectComponent;
   let fixture: ComponentFixture<SelectComponent>;
+  let valueAccessor: NgrxSelectControlValueAccessor;
   let actionsSubject: ActionsSubject;
   let actions$: Observable<Action>;
   let element: HTMLSelectElement;
   const FORM_CONTROL_ID = 'test ID';
   const INITIAL_FORM_CONTROL_VALUE = SELECT_OPTIONS[1];
-  const INITIAL_STATE = createFormControlState<string>(FORM_CONTROL_ID, INITIAL_FORM_CONTROL_VALUE);
+  const INITIAL_STATE = createFormControlState(FORM_CONTROL_ID, INITIAL_FORM_CONTROL_VALUE);
 
   beforeEach(() => {
     actionsSubject = new BehaviorSubject<Action>({ type: '' }) as ActionsSubject;
@@ -50,11 +52,12 @@ describe(SelectComponent.name, () => {
     component = fixture.componentInstance;
     component.state = INITIAL_STATE;
     element = (fixture.nativeElement as HTMLElement).querySelector('select') as HTMLSelectElement;
+    valueAccessor = getDebugNode(element)!.injector.get(NgrxSelectControlValueAccessor);
     fixture.detectChanges();
   });
 
   it('should select the correct option initially', () => {
-    expect(element.value).toBe(INITIAL_FORM_CONTROL_VALUE);
+    expect(valueAccessor.value).toBe(INITIAL_FORM_CONTROL_VALUE);
   });
 
   it('should trigger a SetValueAction with the selected value when an option is selected', done => {
@@ -66,5 +69,66 @@ describe(SelectComponent.name, () => {
       expect((a as SetValueAction<string>).payload.value).toBe(newValue);
       done();
     });
-  }, 200);
+  });
+});
+
+const SELECT_NUMBER_OPTIONS = [1, 2];
+
+@Component({
+  // tslint:disable-next-line:component-selector
+  selector: 'select-test',
+  template: '<select [ngrxFormControlState]="state"><option *ngFor="let o of options" [ngValue]="o">{{o}}</option></select>',
+})
+export class NgValueSelectComponent {
+  @Input() state: FormControlState<number>;
+  options = SELECT_NUMBER_OPTIONS;
+}
+
+describe(NgValueSelectComponent.name, () => {
+  let component: NgValueSelectComponent;
+  let fixture: ComponentFixture<NgValueSelectComponent>;
+  let valueAccessor: NgrxSelectControlValueAccessor;
+  let actionsSubject: ActionsSubject;
+  let actions$: Observable<Action>;
+  let element: HTMLSelectElement;
+  const FORM_CONTROL_ID = 'test ID';
+  const INITIAL_FORM_CONTROL_VALUE = SELECT_NUMBER_OPTIONS[1];
+  const INITIAL_STATE = createFormControlState(FORM_CONTROL_ID, INITIAL_FORM_CONTROL_VALUE);
+
+  beforeEach(() => {
+    actionsSubject = new BehaviorSubject<Action>({ type: '' }) as ActionsSubject;
+    actions$ = actionsSubject as Observable<Action>; // cast required due to mismatch of lift() function signature
+  });
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [NgrxFormsModule],
+      declarations: [NgValueSelectComponent],
+      providers: [{ provide: ActionsSubject, useValue: actionsSubject }],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NgValueSelectComponent);
+    component = fixture.componentInstance;
+    component.state = INITIAL_STATE;
+    element = (fixture.nativeElement as HTMLElement).querySelector('select') as HTMLSelectElement;
+    valueAccessor = getDebugNode(element)!.injector.get(NgrxSelectControlValueAccessor);
+    fixture.detectChanges();
+  });
+
+  it('should select the correct option initially', () => {
+    expect(valueAccessor.value).toBe(INITIAL_FORM_CONTROL_VALUE);
+  });
+
+  it('should trigger a SetValueAction with the selected value when an option is selected', done => {
+    const newValue = SELECT_NUMBER_OPTIONS[0];
+    element.selectedIndex = 0;
+    element.dispatchEvent(new Event('change'));
+    actions$.first().subscribe(a => {
+      expect(a.type).toBe(SetValueAction.TYPE);
+      expect((a as SetValueAction<number>).payload.value).toBe(newValue);
+      done();
+    });
+  });
 });

src/module.ts

@@ -10,6 +10,7 @@ import {
   NgrxSelectControlValueAccessor,
   NgrxSelectMultipleControlValueAccessor,
   NgrxRadioControlValueAccessor,
+  NgrxSelectOption,
 } from './value-accessors';
 
 const exportsAndDeclarations = [
@@ -22,6 +23,7 @@ const exportsAndDeclarations = [
   NgrxSelectControlValueAccessor,
   NgrxSelectMultipleControlValueAccessor,
   NgrxRadioControlValueAccessor,
+  NgrxSelectOption,
 ];
 
 @NgModule({

src/value-accessors.ts

@@ -2,6 +2,8 @@ import {
   Directive,
   ElementRef,
   Renderer2,
+  Optional,
+  Host,
   forwardRef,
 } from '@angular/core';
 import {
@@ -12,6 +14,7 @@ import {
   SelectControlValueAccessor,
   SelectMultipleControlValueAccessor,
   RadioControlValueAccessor,
+  NgSelectOption,
 } from '@angular/forms';
 
 // tslint:disable:directive-selector
@@ -138,6 +141,19 @@ export class NgrxNumberValueAccessor implements ControlValueAccessor {
 })
 export class NgrxSelectControlValueAccessor extends SelectControlValueAccessor { }
 
+@Directive({
+  selector: 'option',
+})
+export class NgrxSelectOption extends NgSelectOption {
+  constructor(
+    element: ElementRef,
+    renderer: Renderer2,
+    @Optional() @Host() valueAccessor: NgrxSelectControlValueAccessor,
+  ) {
+    super(element, renderer, valueAccessor);
+  }
+}
+
 @Directive({
   selector: 'select[multiple][ngrxFormControlState]',
   host: {