Sign in
Forms Challenge #48 medium

Avoid losing form data

Browse solutions

Context

As a member of the development team, you need to address a specific request from the product owner, 🧙‍♂️ Bob. He wants to develop a new feature in response to customer complaints about losing form input information.

User Story

Here's the feature expressed as a user story with a functional expectation:

As a user, I would like to have an alert dialog box that appears when I attempt to navigate away from the page, after I have started entering information into the form.

Acceptance Criteria

  1. If one of the form fields is not empty and the user tries to navigate to a different route inside the app, show your own alert dialog to avoid losing form data.
  2. If the user reloads the page, closes the tab, or leaves the document, the browser's native confirmation prompt must be triggered instead — a custom dialog cannot be rendered at that point.
  3. The content of dialog.component.ts must be used for the in-app alert.
  4. The appearance and behavior of the alert dialog box must comply with W3C conventions, see alert dialog pattern.
  5. Maximize the use of the new concepts and syntax in the latest version of Angular.
Tips 🤫 (if you really need it and after careful consideration)
  • Use the Material CDK Dialog or Overlay - don't forget to add @import '@angular/cdk/overlay-prebuilt.css' in styles.css
  • Use the CanDeactivate guard in the new functional approach for in-app navigation, and the beforeunload event for reloads and tab closes.