How best to implement nested forms for single page application?

Let we have a form (for example) the Address (Country, City, ...). When creating a address, you need to make the opportunity to create a City in a separate form (as there may be many fields) and return the value in the original form value to continue filling. This same process can occur in the forms of Country and City. Which pattern is best suited for this task. What is the best way to implement within Angular.
I will clarify the question. At some level we have the scenario of several steps. In each moment we can start podszewki returns the result (to the user it may look like a new form of input or search). The problem is that the scripts nested and podszewki adding anything can be a top-level scenario.

Actually I want an architectural solution for SPA. For server-side AJAX application, this is fairly simple using modal Windows. Is it possible in Angular (or Vue) to use a Router for modal Windows.
March 12th 20 at 08:01
1 answer
March 12th 20 at 08:03
Unlike the fat client from any namby-pamby that Tolstoy is a fortune, which he cherishes. Once You understand this, the answer becomes obvious.

There is a condition, no matter is the room or the vault, or top-level component. Then You do all the actions that need data from the user collected in this state, and then, when finished, all together, is sent to the server.

Given the persistence, then you can very idea to organize anything, or render different elements on a single url, or to make routing/subrouting.

PS If the example with the real cities, it is possible to take the maps API from Google or Yandex, the customer enters the city and address, it shows a dot on the map, then under this point get complete details of the place with a bunch of extra information, then it may be useful, although the data itself stored mail that you want. In this case, it generally will not need to use SPA.

Find more questions by tags One-page applicationVue.jsAngular