fix(lib): Cannot read property 'nodeIndex' of null thrown when comp…

…onent is being marked as dirty (with `markDirty` before the view is initialised
cloudnc · Dec 30, 2020 · 687ce21 · 687ce21
1 parent 274420a
commit 687ce21
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 13 deletions.
diff --git a/projects/ngx-sub-form/src/lib/ngx-sub-form.ts b/projects/ngx-sub-form/src/lib/ngx-sub-form.ts
@@ -5,6 +5,7 @@ import { getObservableLifecycle } from 'ngx-observable-lifecycle';
 import { EMPTY, forkJoin, merge, Observable, of, timer } from 'rxjs';
 import {
   delay,
+  exhaustMap,
   filter,
   map,
   mapTo,
@@ -71,6 +72,7 @@ export function createForm<ControlInterface, FormInterface>(
 
   const lifecyleHooks: ComponentHooks = options.componentHooks ?? {
     onDestroy: getObservableLifecycle(componentInstance).ngOnDestroy,
+    afterViewInit: getObservableLifecycle(componentInstance).ngAfterViewInit,
   };
 
   lifecyleHooks.onDestroy.pipe(take(1)).subscribe(() => {
@@ -208,15 +210,24 @@ export function createForm<ControlInterface, FormInterface>(
         formGroup.reset(value, { emitEvent: false });
       }),
     ),
-    supportChangeDetectionStrategyOnPush: controlValue$.pipe(
-      delay(0),
-      tap(() =>
-        // support `changeDetection: ChangeDetectionStrategy.OnPush`
-        // on the component hosting a form
-        // fixes https://github.com/cloudnc/ngx-sub-form/issues/93
-        markDirty(componentInstance),
+    supportChangeDetectionStrategyOnPush:
+      // we need to wait first for the view to have been initialised
+      // otherwise calling `markDirty` previous to that throws an error
+      // `Cannot read property 'nodeIndex' of null`
+      // and the `delay(0)` doesn't give us that guarantee on its own
+      lifecyleHooks.afterViewInit.pipe(
+        exhaustMap(() =>
+          controlValue$.pipe(
+            delay(0),
+            tap(() =>
+              // support `changeDetection: ChangeDetectionStrategy.OnPush`
+              // on the component hosting a form
+              // fixes https://github.com/cloudnc/ngx-sub-form/issues/93
+              markDirty(componentInstance),
+            ),
+          ),
+        ),
       ),
-    ),
     setDisabledState$: setDisabledState$.pipe(
       tap((shouldDisable: boolean) => {
         shouldDisable ? formGroup.disable({ emitEvent: false }) : formGroup.enable({ emitEvent: false });

diff --git a/projects/ngx-sub-form/src/lib/ngx-sub-form.types.ts b/projects/ngx-sub-form/src/lib/ngx-sub-form.types.ts
@@ -7,13 +7,13 @@ import {
   Controls,
   ControlsNames,
   NewFormErrors,
-  OneOfControlsTypes,
   TypedFormGroup,
 } from './shared/ngx-sub-form-utils';
 import { FormGroupOptions } from './shared/ngx-sub-form.types';
 
 export interface ComponentHooks {
   onDestroy: Observable<void>;
+  afterViewInit: Observable<void>;
 }
 
 export interface FormBindings<ControlInterface> {

diff --git a/...ain-rewrite/listing/listing-form/droid-listing/protocol-droid/protocol-droid.component.ts b/...ain-rewrite/listing/listing-form/droid-listing/protocol-droid/protocol-droid.component.ts
@@ -1,6 +1,5 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { FormControl, Validators } from '@angular/forms';
-import { getObservableLifecycle } from 'ngx-observable-lifecycle';
 import { createForm, FormType, subformComponentProviders } from 'ngx-sub-form';
 import { DroidType, Languages, ProtocolDroid } from '../../../../../interfaces/droid.interface';
 
@@ -22,8 +21,5 @@ export class ProtocolDroidComponent {
       droidType: new FormControl(DroidType.PROTOCOL, { validators: [Validators.required] }),
       spokenLanguages: new FormControl(null, { validators: [Validators.required] }),
     },
-    componentHooks: {
-      onDestroy: getObservableLifecycle(this).ngOnDestroy,
-    },
   });
 }