Open yonathan06 opened 7 years ago
I am also experiencing this in a similar scenario. I have a parent form that is nested three layers deep in the state tree, which contains an array of child subforms. During the FORM_CHANGED
action, the changes from the child form are placed in the parent form instead. Below I'll put a simplified version of the form, which should illustrate the general problem.
I have a parent form at the path: ['workflow', 'page1', 'form']
.
It contains an array of child forms, childForms
, which is therefore at the path ['workflow', 'page1', 'form', 'childForms']
.
This child array is populated with a default first value before the page loads, so my state tree before the FORM_CHANGED
event ostensibly looks like the following:
{
workflow: {
page1: {
form: {
input1: "loadedInput",
childForms: [
{
childInput1: "loadedChildInput1"
}
]
}
}
}
}
Following this generic example, in the HTML template, I have:
<form [connect]="['workflow', 'page1', 'form']">
<input type="text"
name="input1"
ngControl ngModel>
<ng-template connectArray let-index connectArrayOf="childForms">
<div class="row" [ngModelGroup]="index">
<input type="text"
name="childInput1"
ngControl ngModel>
</div>
</ng-template>
</form>
NOTE: While the documentation shows the connect
directive invoked without the brackets, I have tried it with and without them and the same error occurs in either case.
After the FORM_CHANGED
event that occurs on the page load, the state tree from above looks like the following:
{
workflow: {
page1: {
form: {
0: {
childInput1: "loadedChildInput1"
},
input1: "loadedInput",
childForms: [
{
childInput1: "loadedChildInput1"
}
]
}
}
}
}
Right before this initial FORM_CHANGED
event, I see the exact same error that @yonathan06 posted (with a different field name, obviously).
So, to me, it seems that the reducer is posting the changed input value to the parent state, not the child state. Perhaps this is not a problem if the parent state is at the root of the state tree, as is the case in the example from the docs? But even if that is the case, it should be fixed so it works with nested states as well.
I am having this issue as well. The parent state is nested one level down the state tree, so it looks like this is the source of the problem. Any clues? Thanks!
@jkachurek if you do the following you can get it at the right level
<form [connect]="['workflow', 'page1', 'form']">
<input type="text"
name="input1"
ngControl ngModel>
<ng-template connectArray let-index connectArrayOf="childForms">
<div [ngModelGroup]="'childForms'"> <!-- <-- Add this-->
<div class="row" [ngModelGroup]="index">
<input type="text"
name="childInput1"
ngControl ngModel>
</div>
</div>
</ng-template>
</form>
This works, However if your loading dyncamic content from the server it always seems to set your values back to empty. But at least its poiting at the correct level
Hi guys. Im facing the very same issue, only somewhat later. Are there any solution to this? @el-davo's solution didn't work for me :/
This is a...
What toolchain are you using for transpilation/bundling?
Environment
NodeJS Version: 6.10 Typescript Version: 2.3.0 Angular Version: 4.0.3 angular-redux/store version: 6.2.0 angular/cli version: 1.0.0-beta.32.3 OS: windows 10
Getting error
Cannot read property 'arrivalTime' of undefined
The problematic areas are surrounded by comment ERROR HERE
my html:
The rest of the forms are working fine
here is my interface:
this is the stack trace:
Thought
When I change the value in the problematic
Thanks