All Challenges
3 PointsIntermediate
00:00

MEAN Stack: Angular Reactive Form Delta Tracker & Auto-Save Sync Engine

Design an Angular reactive form delta engine that computes dirty field patches, debounces auto-save triggers, and provides rollback recovery.

### Problem Overview In enterprise Angular applications, saving a 100-field form by transmitting the entire monolithic JSON object to MongoDB on every keystroke wastes network bandwidth and overwrites concurrent user edits. You must build an Angular Reactive Form Delta Tracker that tracks pristine state, detects dirty field mutations, computes minimal JSON delta patches (supporting nested objects), and synchronizes with the server with rollback protection. ### Functional Requirements 1. **`initialize(initialValue: T): void`**: - Captures a deep snapshot of the pristine form state. 2. **`update(fieldPath: string, newValue: any): void`**: - Updates the working state and marks modified fields as dirty. 3. **`getDirtyDelta(): Record<string, any>`**: - Computes a minimal flat dot-notation delta object (e.g. `{ "address.city": "Boston" }`) containing only changed fields. 4. **`save(syncRemote: (delta: Record<string, any>) => Promise<boolean>): Promise<boolean>`**: - If save succeeds, promotes the current state to the new pristine baseline. 5. **`rollback(): T`**: - Reverts current state back to the latest pristine snapshot.
AI Review Rubric Dimensions (1–10 Points):
  • Nested path traversal
  • Deep snapshot cloning
  • Baseline promotion on save
  • Rollback integrity
solution.tsTYPESCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
27 lines•561 characters•
AI Review Ready