diff --git a/blog/2025-10-signal-forms-part2/README.md b/blog/2025-10-signal-forms-part2/README.md index 23a93a93..9526f204 100644 --- a/blog/2025-10-signal-forms-part2/README.md +++ b/blog/2025-10-signal-forms-part2/README.md @@ -3,7 +3,7 @@ title: 'Angular Signal Forms Part 2: Advanced Validation and Schema Patterns' author: Danny Koppenhagen and Ferdinand Malcher mail: dannyferdigravatar@fmalcher.de # Gravatar published: 2025-10-15 -lastModified: 2025-11-13 +lastModified: 2025-11-15 keywords: - Angular - Signals @@ -405,6 +405,30 @@ We can use this state to provide user feedback in the UI: ``` +## Debounce: Delay updates from the UI + +Async validation can be expensive: by default, an async call is made with every character entered in an input field. + +The `debounce()` function delays updates from the UI to the form model. +When applied, updates are only emitted to the form after typing has stopped for the given time (here 500 ms), or when the field loses focus. +This means that not each and every character changes the form value and triggers validation, but only when the user has paused typing for 500 ms. + +```typescript +import { /* ... */, validateAsync, debounce } from '@angular/forms/signals'; + +export const registrationSchema = schema((schemaPath) => { + // Delay username updates by 500ms + debounce(schemaPath.username, 500); + + // Async validation will only trigger after debounce delay + validateAsync(schemaPath.username, { + // ... + }); +}); +``` + +This prevents excessive API calls during typing and improves performance by batching rapid user input changes. + ## Controlling Field State Signal Forms also provide functions to control field behavior beyond validation.