Skip to content
angular challenges logo Angular Challenges

๐ŸŸ  Avoid losing form data

Challenge #48

Created by Timothy Alcaide

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 or page, or wants to reload the page, show an alert dialog to avoid losing form data.
  2. The content of dialog.component.ts must be used for your alert.
  3. The appearance and behavior of the alert dialog box must comply with W3C conventions, see alert dialog pattern.
  4. 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.scss
  • Use the CanDeactivate guard in the new functional approach.

Contributors

Thanks to all the contributors who have helped make this documentation better!

  • alcaidio
  • svenson95
  • LMFinney