ReactiveForms with dynamic recursive templates

Problem with your current code seems to be that ng-template parent is your app component, so it doesnt take into account other formGroupNames in top templates you defined and always seek in root FormGroup.

It also seems that full group name/control name is not supported in templates (e.g. cant use formGroupName="address.road")

If you need for some reason formGroups -- you can pass them in context to templates. Or you can address formControls directly:

• remove all formGroupName from template
• store fullPath: keys.push({"key":key,children:[], fullKey: parent ? parent.fullKey + '.' + key: key}); (you can store FormControl instance itself as well ofc.)
• and use it: <input type="text" [formControl]="myForm.get(node.fullKey)"

Stackblitz Example

Or if you still want form groups / controls hierarchy you can use formGroup and formControl directives by passing them recursively (instead of formGroupName and formControlName)

Stackblits link

NB : same issue here : Recursive ReactiveForm cannot find formGroups inside of template