How to create one single Reactive form across multiple components

Question

I am new to Angular. My app has reactive form. It has 4 pages (4 different Components). my form fields are also spread across 4 components.

End of each page, user clicks button to navigate next page. Submit button at 4th page. My intention is to submit form data to server.

My Questions are :

1) Is it possible to create one single reactive form across 4 components.

If it is not possible,

2) I have created 4 different reactive forms in all 4 pages. each page button click sends form data to shared common service. Finally 4th page get all form data from service. Is this right design approach. Please guide me.

3) If I follow above design means, 4th page I will get form(Reactive) data from all 4 components. how to construct one single POST request data of different components(forms) data.

Answer 1

1. Create an interface with all the fields in it.

2. Create a common service with a variable with type of the interface you created.

   serviceVariable= {};

3. In the submit click of each page use object.assign() function to merge the object.

   serviceVariable = Object.assign(serviceVariable,formName.value);

4. finally use the serviceVarible in the post request.