fix: changed form control state directive to run its initialization code inside the ngAfterViewInit hook instead of ngOnInit to allow proper interaction with form elements that can have dynamically rendered children they depend on (e.g. dynamic options for selects)

Author: MrWolfZ

CHANGELOG.md

@@ -5,7 +5,8 @@
 
 #### 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
+* fix issue 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
+* changed form control state directive to run its initialization code inside the `ngAfterViewInit` hook instead of `ngOnInit` to allow proper interaction with form elements that can have dynamically rendered children they depend on (e.g. dynamic `option`s for `select`s)
 
 <a name="1.0.0"></a>
 ### 1.0.0

src/control/directive.comp.spec.ts

@@ -0,0 +1,70 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Component, Input } from '@angular/core';
+import { ActionsSubject, Action } from '@ngrx/store';
+import { Observable } from 'rxjs/Observable';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+import 'rxjs/add/operator/first';
+import 'rxjs/add/operator/skip';
+
+import { FormControlState, createFormControlState } from '../state';
+import { SetValueAction } from '../actions';
+import { NgrxFormsModule } from '../module';
+
+const SELECT_OPTIONS = ['op1', 'op2'];
+
+@Component({
+  // tslint:disable-next-line:component-selector
+  selector: 'select-test',
+  template: '<select [ngrxFormControlState]="state"><option *ngFor="let o of options" [value]="o">{{o}}</option></select>',
+})
+export class SelectComponent {
+  @Input() state: FormControlState<string>;
+  options = SELECT_OPTIONS;
+}
+
+describe(SelectComponent.name, () => {
+  let component: SelectComponent;
+  let fixture: ComponentFixture<SelectComponent>;
+  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);
+
+  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: [SelectComponent],
+      providers: [{ provide: ActionsSubject, useValue: actionsSubject }],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SelectComponent);
+    component = fixture.componentInstance;
+    component.state = INITIAL_STATE;
+    element = (fixture.nativeElement as HTMLElement).querySelector('select') as HTMLSelectElement;
+    fixture.detectChanges();
+  });
+
+  it('should select the correct option initially', () => {
+    expect(element.value).toBe(INITIAL_FORM_CONTROL_VALUE);
+  });
+
+  it('should trigger a SetValueAction with the selected value when an option is selected', done => {
+    const newValue = SELECT_OPTIONS[0];
+    element.value = newValue;
+    element.dispatchEvent(new Event('change'));
+    actions$.first().subscribe(a => {
+      expect(a.type).toBe(SetValueAction.TYPE);
+      expect((a as SetValueAction<string>).payload.value).toBe(newValue);
+      done();
+    });
+  }, 200);
+});

src/control/directive.spec.ts

@@ -36,7 +36,7 @@ describe(NgrxFormControlDirective.name, () => {
     };
     directive = new NgrxFormControlDirective<string>(elementRef, document, actionsSubject, [valueAccessor]);
     directive.ngrxFormControlState = INITIAL_STATE;
-    directive.ngOnInit();
+    directive.ngAfterViewInit();
   });
 
   afterEach(() => {

src/control/directive.ts

@@ -5,7 +5,7 @@ import {
   Inject,
   HostListener,
   HostBinding,
-  OnInit,
+  AfterViewInit,
   OnDestroy,
   Self,
 } from '@angular/core';
@@ -32,7 +32,7 @@ import { selectValueAccessor } from '../value-accessors';
 @Directive({
   selector: '[ngrxFormControlState]',
 })
-export class NgrxFormControlDirective<TValue extends FormControlValueTypes> implements OnInit, OnDestroy {
+export class NgrxFormControlDirective<TValue extends FormControlValueTypes> implements AfterViewInit, OnDestroy {
   @Input() set ngrxFormControlState(newState: FormControlState<TValue>) {
     if (!newState) {
       throw new Error('The control state must not be undefined!');
@@ -87,7 +87,7 @@ export class NgrxFormControlDirective<TValue extends FormControlValueTypes> impl
   @Input() convertViewValue: (value: any) => TValue = value => value;
   @Input() convertModelValue: (value: TValue) => any = value => value;
 
-  ngOnInit() {
+  ngAfterViewInit() {
     if (!this.state) {
       throw new Error('The form state must not be undefined!');
     }