Skip to content

Commit 3bab6bf

Browse files
committed
docs(): add description and test instructions
1 parent 38a5b74 commit 3bab6bf

2 files changed

Lines changed: 24 additions & 7 deletions

File tree

apps/forms/65-signal-form-edition/README.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,12 @@
88
npx nx serve forms-signal-form-edition
99
```
1010

11+
### Run Tests
12+
13+
```bash
14+
npx nx test forms-signal-form-edition
15+
```
16+
1117
### Documentation and Instruction
1218

1319
Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/forms/65-signal-form-edition/).

docs/src/content/docs/challenges/forms/65-signal-form-edition.md

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
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.
44
author: thomas-laforge
55
contributors:
66
- tomalaforge
@@ -13,9 +13,9 @@ sidebar:
1313

1414
## Information
1515

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.
1717

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.
1919

2020
## Statement
2121

@@ -25,7 +25,7 @@ The application allows listing, adding, and editing users. It includes:
2525
- **User Form**: A form used for both adding and editing users.
2626
- **Fake Backend**: Simulates HTTP calls with a 500ms delay.
2727

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.
2929

3030
### Current Implementation
3131

@@ -35,18 +35,29 @@ The form currently uses:
3535
- `Validators` for mandatory fields (`firstname`, `lastname`, `age`) and minimum age.
3636
- `patchValue` and `reset` for managing form state during edition.
3737

38+
The application also uses `rxResource` to load users and navigation to handle the editing context.
39+
3840
### Expected Result
3941

40-
After completing the challenge, your application should:
42+
After completing the challenge:
4143

4244
- Use Signal-based form instead of `FormControl` and `FormGroup` in `UserFormComponent`.
4345
- Maintain all existing validation rules and error messages.
4446
- Correctly handle the transition between "Add" and "Edit" modes.
45-
- Keep the 500ms delay simulation working via the service.
4647
- Maintain the same UI and user experience.
4748

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+
4859
## Constraints
4960

5061
- 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`.
5263
- The form must properly validate inputs before submission.

0 commit comments

Comments
 (0)