Nested form components are not set with initial values on submit

Question

I am trying to implement nested form components in angular with reactive forms using ControlValueAccessors, and I have been following this guide: https://blog.angularindepth.com/angular-nested-reactive-forms-using-cvas-b394ba2e5d0d

I have got everything to work except one major issue. If my form is pre-populated, i.e. the form is used to edit existing data instead of creating, then the initial data is not set on the form's value upon submit if the corresponding child component form values hasn't been changed.

I have an example setup on the following link (Open up the console in the down right corner): https://stackblitz.com/edit/angular-nested-forms-cva-izbrht

As you can see, if you press submit immediately, the form value contains two properties which value is just two empty strings. If you edit e.g. the first name and then submit you will see that the basicInfo property now has been properly set with its values.

Answer 1

I solved it by creating the complete FormGroup in the parent component, and then passing in the child forms to the child components as inputs. This removes the need to use ControlValueAccessors.

I am not happy with this solution because I would like the child components to have the responsibility to create their formgroup, but I can't find any solution to my problem, so this will have to do for now.