Form Design Approach Best Practice

Hi guys,

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.

Request for opinions on this.

Cheers,
SD

hey @SD1985,

what w.r.t. navigation does mean?

Hi @quieterkali

This is the use case.

Home => Form Add/Edit Page => Display Data Page.

Here when the user saves Form Add/Edit Page I push to Display Data Page. The push works fine.

But then I want to remove the Form Add/Edit Page. I have a working solution now.

I either use navCtrl.pop or ViewCtrl.dismiss to remove the Form Add/Edit Page before pushing to Display Data Page.

But that shows a visual transition where the control goes to Home and then to Display Data Page.

I have pretty much tried everything else like
navCtrl.push.then(()=>{
navCtrl.remove();

or

navCtrl.removeView()

})

I also tried adding the remove method in the ionViewWillEnter() of the Display Data Page.

Both these tends to break all links in the page. Nothing happens when u click back on the Display Data Page. In fact no links work.

I want to the nav Stack to just have Home and Display Data Page in the stack.

Well that’s the problem I faced.

Regards,

SD

This seems bizarre to me. How can “all links in the page” be so fragile that they care about the state of the navigation stack?

In any event, what happens if you use setRoot() instead of push()?

wrt = “with respect to”

1 Like

@AaronSterling thank you very much :smile:

:joy: hahahahahhahahhaaaaaaaaaaa

I want to keep my current stack. I don’t want a new stack.

setRoot() makes me loose my current stack.

Cheers,
SD

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?

Well!

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.

I think this covers what you said.

cheers,

SD