Angular Signal Forms

Angular Signal Forms Talk from ng-India 2026

Transcript

1. Getting started with Signal Forms Dhananjay Kumar Trainer & Founder, nomadcoder
2. Reactive Form
4. Signal Forms allows you to manage form state by building on the reactive foundation of signals. With automatic two-way binding, type-safe field access, and schema-based validation, Signal Forms help you create robust forms. Ref- Angular Doc
5. Let us start with creating a Form
6. Create the form model interface
7. Create the form model signal
8. Create the form
9. Connecting to template
10. Adding validators
11. Displaying error messages
12. Submitting the form
14. The form() function returns a FieldTree, an object where each form field is represented as a signal enriched with reactive properties like value, dirty, and invalid. FieldTree
15. FieldTree
16. FieldTree
18. Validators required() email() min() max() minLength() maxLength() pattern()
19. Custom Validator
20. Use in form
21. Validations Flow
22. Async Validator • Check if usernames or emails are already taken • Look up data in the database to confirm values • Use external services (APIs) to verify things like addresses or tax IDs • Apply business rules that only the server can validate
24. Signup form
25. Signup form
26. Signup form
27. Signup form
28. Async validator
29. Async validator
30. Async Validator
31. Async Validator
32. Request function • Undefined to skip the validation • A URL for performing the validation using the GET operation • An HttpResourceRequest if you need to set additional request options, such as the verb header, etc. • This is the same object you use with httpResource to configure the request object.
33. The onError function handles request failures like network errors or HTTP errors. • The onSuccess function receives the HTTP response and returns validation errors or undefined for valid values. • It can also return multiple errors when needed. validateHttp
34. Async validatior POST
35. It is a lower-level API that exposes Angular's resource primitive directly. It offers complete control but requires more code and familiarity with Angular's resource API. Most application should use validateHttp () validateAsync()
36. validateAsync()
37. validateAsync() •Non-HTTP validation - WebSocket connections, IndexedDB lookups, or Web Worker computations •Custom caching strategies - Application- specific caching beyond simple memorization •Complex retry logic - Custom backoff strategies or conditional retries •Direct resource access - When you need the full resource lifecycle
38. Signal Forms are backed by a model, which is a writable signal. When the model value changes, the form updates automatically. Likewise, when the user interacts with the form, the model is updated. In this way, the model and the form are connected through two-way binding, which means changes in one are reflected in the other. Two way Binding
39. Two way Data Binding
40. Two Way Data Binding
41. Bind API response to form
42. User input to model flow
43. model to user input flow
44. The form model and the domain model are two different concepts and should be treated separately. Your API response may map directly to the domain model, but you should define a dedicated form model when working with signal-based forms. Form Model
45. Always use explicit typescript type to define the mode
46. When you define a form using explicit types as shown above, the resulting field tree is fully type-safe. For example, loginForm.email is inferred as FieldTree<string>, and any attempt to access a property that doesn’t exist will produce a compile time error. Type Safety
47. Undefined • Set the value explicitly to null • For input fields such <input type=”text” /> , set the value to empty string. • Do not use undefined
48. Optional Fields • Fields explicitly set to undefined are omitted from the field tree. • A model defined as { value: undefined } behaves the same as {}. • Accessing that field returns undefined instead of a FieldTree instance
50. Homework • Migration using compatForm • Creating Custom Control • Implement Form Array
51. Thank You • dhananjay@nomadcoder.ai • Training • Consulting • Speaking • MVP development • Product Development