I have been playing around with this idea for a while and thought of asking what is the best advised approach is on this topic.
In my app I currently use a page for a form to add or edit existing data and another page to display content.
I was wondering what would be a good design approach when it comes to forms especially given the fact that my current approach has been causing me some nightmares for a while w.r.t. navigation.
My current design is
Home => Form Add/Edit Page => Form Data Display page.
The issue is after the form has been saved and the FormData Display Page has moved on top of the current stack and displayed it becomes a night mare to the previous Form Add/Edit Page.
Also my current approach has two pages to deal with.
I read through and understand that the advised approach to forms is to use a modal.
Considering this I have two designs in my mind. I would like your opinion on the same.
Design 1:
Home => Form Add/Edit/Display page.
In this I have one page only to deal with and I intend to use *ngIf to toggle between Add/Edit and Display parts of the dom. The advantage I see here is that I dont have to deal with navCtrl. But the code length in both my html and ts becomes longer and might become a issue in more complex forms.
Design 2:
Home => Form Add/Edit Modal = > Display Page
Here as shown I intend to use a modal for add and editing form data and use a page to display. The advantage I see is clear separation of code between the Add/edit and display routine. Also this seems to be the advised approach. But I still have to deal navCtrl. But then since modal has a dismiss method. I have a feeling nav may not be as complicated as my current approach.
Then I don’t understand why you don’t just keep it. If the user notices that they have made a mistake in editing once they get to the display page, wouldn’t it be nice for them to just go back to the edit page?
The majority use case is that the users are going to be correct. Plus I have a edit button in the display page that triggers a push to a new form page where the user can edit data.