CODEWITHSUNDEEP
angularangular-reactive-formsangular-forms
Vignesh R
Vignesh R

Reputation: 609

How to create one single Reactive form across multiple components

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.

Upvotes: 0

Views: 1316

Answers (2)

majo manoj
majo manoj

Reputation: 36

  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.

Upvotes: 1

Joe Belladonna
Joe Belladonna

Reputation: 1339

Solution 2 is fine. You need to create a class or an array of data in service that will keep your data until you send it to the server. That class or an array will have all data from all 4 pages and on every button click (on every page) you will fill part of your class/array with data from that page. When you click final button on page 4 you will send data from that class/array to server.

Upvotes: 1

Related Questions