27Dec

⚡ Angular — Protect your unsaved data

Have you ever filled a form and mistakenly closed that tab or went back without completing the process and lost all those data? Prevent your users from experiencing the same.

Angular provides CanDeactivate route guard, which prevent navigating from one route to another, unless the given condition becomes truthy.

Imagine a simple dashboard, having a form which helps User registration.

1

If the form is filled or half filled (dirty) and if the Admin navigates to some other route mistakenly, then the form entries will get lost and that Admin have to re-enter all the entries again to complete the registration.

In-order to prevent that, we can show a confirm popup, where Admin states that he is navigating with his knowledge, if not the navigation will be prevented.

As said earlier, we can achieve this using CanDeactivate route guard.

Create a service which implements CanDeactivate, which asks for canDeactivate() method which in-turn takes an argument component as the component which we want to implement CanDeactivate. And register your service in the provides array in the respective module.

 

angular canDeactivate router

CanDeactivate implementation3Simple bootstrap form

 

@ViewChild(‘userForm’) userForm: NgForm; inside the component, through which we can be able to check whether the form is dirty (value entered) or not.

Here, if the Admin navigates from the route which has filled form to another, confirm pop-up will be appeared.

3Preview

In this way, we can prevent our user from losing their data.

In this example anyway we have only two inputs. It won’t be much tedious to re-enter the data again. Consider a form with 10+ or 20+ inputs. It will be very painful if that is the situation. Hope this helps 💖

Related

Microsoft Dynamics NAV Control & recognizes add-ins

NAV fill in assembly list table with these 3 fields and when NAV looks for dll it uses these fields ...

Read More >

OUT OF BAND Feature

What is the Out of Band??Think about the situation – your one of the user who is thousand mile...

Read More >

Technical Consultant | Visual Studio

Should be able to perform independently and with the team. Experience in creating reports using SQL...

Read More >

Autofill RecVariable Name in DynamicsNAV 2015

I discovered something quite interesting couple of week back and I thought it was worth sharing.When...

Read More >

How to enable Lync Addin and create Lync Meetings using the Outlook 2013

 How to enable Lync Addin and create Lync Meetings using the Outlook 20131.   &n...

Read More >

Design Microsoft Dynamics Navision 2013R2 RDLC Report

What is RDLC Report?The Report Definition Language (RDL) Data is a report component that is used by ...

Read More >

Upcoming Webinar - Offshore support to North American Dynamics NAV partners

Offshore support to North American Dynamics NAV partners whose customers are moving to NAV '16Wh...

Read More >

How to print TransHeader and TransFooter in Microsoft Dynamics NAV RDLC reports

We know that TransHeader and TransFooter section types were available in NAV 2009 version but there ...

Read More >

Handling Radio buttons and Checkboxes using Selenium Webdriver

The main difference between Radio button and Checkbox is that, using radio button we will be able to...

Read More >

Share

Post a Comment

  • Recent
  • Popular
  • Tag
Tags
Monthly Archive
Subscribe
Name

Contact Us
  • *
  • *