angular-redux / form

Keep your Angular2+ form state in Redux
MIT License
41 stars 15 forks source link

Random FormBuilder Form Initialization Errors #53

Open maplion opened 6 years ago

maplion commented 6 years ago

This is a...

What toolchain are you using for transpilation/bundling?

Environment

NodeJS Version: 8.9.4 Typescript Version: 2.5.3 Angular Version: 5.2.3 @angular-redux/store version: 7.0.2 @angular/cli version: (if applicable): 1.6.5 OS: Windows 10

Expected Behaviour:

Angular form to initialize as normal.

Actual Behaviour:

Upon initializing my form, e.g.:

import { FormBuilder, FormGroup } from '@angular/forms';
. . .
    constructor(private fb: FormBuilder) {
    }

ngOnInit() {
// initialize form
        this.form = this.fb.group({
            firstName: [this.firstName],
            lastName: [this.lastName],
            nameSuffix: [this.nameSuffix],
            middleName: [this.middleName],
            nickName: [this.nickName],
        });
}

it throws a very uninformative error on only some forms during initialization -- some work okay.

Stack Trace/Error Message:

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'firstName' of null
TypeError: Cannot read property 'firstName' of null
    at Function.State.traverse (state.js:26)
    at Function.State.get (state.js:44)
    at eval (connect-base.js:92)
    at Array.forEach (<anonymous>)
    at ReactiveConnect.ConnectBase.resetState (connect-base.js:90)
    at eval (connect-base.js:43)
    at ZoneDelegate.invoke (zone.js:388)
    at Object.onInvoke (core.js:4733)
    at ZoneDelegate.invoke (zone.js:387)
    at Zone.run (zone.js:138)
    at Function.State.traverse (state.js:26)
    at Function.State.get (state.js:44)
    at eval (connect-base.js:92)
    at Array.forEach (<anonymous>)
    at ReactiveConnect.ConnectBase.resetState (connect-base.js:90)
    at eval (connect-base.js:43)
    at ZoneDelegate.invoke (zone.js:388)
    at Object.onInvoke (core.js:4733)
    at ZoneDelegate.invoke (zone.js:387)
    at Zone.run (zone.js:138)
    at resolvePromise (zone.js:809)
    at eval (zone.js:861)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4724)
    at ZoneDelegate.invokeTask (zone.js:420)
    at Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
    at <anonymous>

Additional Notes:

It took me a while to track down that it was related to a form issue. Once I discovered it was a form issue, I started looking into what had changed. My update to @angular-redux/form 6.7.0 from 6.6.0 seemed to be the culprit. I downgraded and it worked as intended, then upgraded back to 6.7.0 and I get the same "random" error [can't figure out why it works on some forms, but not others -- but the forms it fails on, it fails on every time].

I also found that of the forms that worked, if there were any hidden form elements that I was sending to the store along with other form changes, these were no longer sending to the store as a direct result of this update.