vcgit-forge/angular-challenges
1
0
Fork 0
mirror of https://github.com/Raghu-Ch/angular-challenges.git synced 2026-02-10 12:53:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

docs(c48): update docs content

Browse Source
This commit is contained in:
Sven Brodny
2024-04-19 01:27:26 +02:00
committed by Vimulatus
parent 838b8c6f9e
commit 19f265d3c2
1 changed files with 8 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
docs/src/content/docs/challenges/forms/48-avoid-losing-form-data.md
View File

@@ -18,25 +18,24 @@ As a member of the development team, you need to address a specific request from
## User Story ## User Story
Here's the feature expressed as a user story (functional expectation) : 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 /form page after I have started entering information into the form." > 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 ## Acceptance Criteria
1. On the /form page: 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_.
- If the input text has been pre-filled, then an alert dialog box opens. 2. The content of `dialog.component.ts` must be used for your alert.
- Otherwise, the user navigates normally.
2. The content of `dialog.component.ts` must be use for your dialog box content.
3. The appearance and behavior of the alert dialog box must comply with W3C conventions, see [alert dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/). 3. The appearance and behavior of the alert dialog box must comply with W3C conventions, see [alert dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/).
4. Maximize the use of the new concepts and syntax in the latest version of Angular. 4. Maximize the use of the new concepts and syntax in the latest version of Angular.
<details> <details>
<summary>Tips 🤫 (if you really need it and after careful consideration)</summary> <summary>Tips 🤫 (if you really need it and after careful consideration)</summary>
<ul> <ul>
<li>Use the Material CDK Dialog or Overlay - https://material.angular.io/cdk/ (dont forget to add @import '@angular/cdk/overlay-prebuilt.css' in style.sccss)</li> <li>Use the Material CDK Dialog or Overlay - https://material.angular.io/cdk/ (dont forget to add `@import '@angular/cdk/overlay-prebuilt.css'` in `styles.scss`)</li>
<li>Use the CanDeactivate guard - https://angular.io/api/router/CanDeactivate (use new functionnal approach).</li> <li>Use the `CanDeactivate` guard - https://angular.io/api/router/CanDeactivate in the new functional approach.</li>
</ul> </ul>
</details> </details>