You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/src/content/docs/challenges/forms/65-signal-form-edition.md
+18-7Lines changed: 18 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
---
2
2
title: 🟠 signal-form-edition
3
-
description: Challenge 65 is about ...
3
+
description: Refactor a user management form to use Angular's new Signal-based Forms API.
4
4
author: thomas-laforge
5
5
contributors:
6
6
- tomalaforge
@@ -13,9 +13,9 @@ sidebar:
13
13
14
14
## Information
15
15
16
-
Angular has introduced a new way to work with forms using Signals. This modern approach provides better type safety, reactivity, and a more intuitive API compared to traditional Reactive Forms.
16
+
Angular has introduced a new way to work with forms using Signals. This modern approach provides better reactivity and a more intuitive API compared to traditional Reactive Forms.
17
17
18
-
In this challenge, you will maintain a user management application. The current implementation uses Reactive Forms (`FormControl`, `FormGroup`). Your goal is to migrate it to the new Signal-based Forms API.
18
+
In this challenge, you will refactor a user management application. The current implementation uses traditional Reactive Forms. Your goal is to migrate it to the new Signal-based Forms API.
19
19
20
20
## Statement
21
21
@@ -25,7 +25,7 @@ The application allows listing, adding, and editing users. It includes:
25
25
-**User Form**: A form used for both adding and editing users.
26
26
-**Fake Backend**: Simulates HTTP calls with a 500ms delay.
27
27
28
-
Your goal is to **refactor the `UserFormComponent` to use Angular's new Signal-based Forms API** while maintaining exactly the same functionality and validation rules.
28
+
Your goal is to **refactor the `UserFormComponent` to use Angular's Signal-based Forms API** while maintaining exactly the same functionality and validation rules.
29
29
30
30
### Current Implementation
31
31
@@ -35,18 +35,29 @@ The form currently uses:
35
35
-`Validators` for mandatory fields (`firstname`, `lastname`, `age`) and minimum age.
36
36
-`patchValue` and `reset` for managing form state during edition.
37
37
38
+
The application also uses `rxResource` to load users and navigation to handle the editing context.
39
+
38
40
### Expected Result
39
41
40
-
After completing the challenge, your application should:
42
+
After completing the challenge:
41
43
42
44
- Use Signal-based form instead of `FormControl` and `FormGroup` in `UserFormComponent`.
43
45
- Maintain all existing validation rules and error messages.
44
46
- Correctly handle the transition between "Add" and "Edit" modes.
45
-
- Keep the 500ms delay simulation working via the service.
46
47
- Maintain the same UI and user experience.
47
48
49
+
## Testing
50
+
51
+
A comprehensive test suite is provided to ensure your refactoring doesn't break any functionality. You can run the tests using:
52
+
53
+
```bash
54
+
npx nx test forms-signal-form-edition
55
+
```
56
+
57
+
These tests verify the entire user management flow, including adding, editing, and deleting users, as well as form validation.
58
+
48
59
## Constraints
49
60
50
61
- Do not modify the `FakeBackendService` or `User` model.
51
-
- You can refactor `AppComponent` and `UserListComponent`if necessary to better support signals, but the primary focus is the form.
62
+
- You can refactor other components if necessary, but the primary focus is the `UserFormComponent`.
52
63
- The form must properly validate inputs before submission.
0 commit comments