Signal Forms: Beyond the Basics @ngBelgrade 2026

Transcript

1. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Signal Forms: Beyond the Basics ANGULARarchitects.io
2. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 2
3. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 4 About Me (Remote) Angular Workshops and Consulting Google Developer Expert for Angular Blog, Books, Articles, and Talks about Angular Manfred Steyer, ANGULARarchitects.io
4. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 5 Signal Forms 101
5. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 6 Setting up a Signal Form protected readonly flight = signal<Flight>({ id: 123, from: 'Graz', to: 'Rome', aircraft: { type: 'T0815', registration: 'R4711' }, […] });
6. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 7 Setting up a Signal Form protected readonly flight = signal<Flight>({ id: 123, from: 'Graz', to: 'Rome', aircraft: { type: 'T0815‘, registration: 'R4711‘ }, […] }); protected readonly flightForm = form(this.flight);
7. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 8 Setting up a Signal Form protected readonly flight = signal<Flight>({ id: 123, from: 'Graz', to: 'Rome', aircraft: { type: 'T0815‘, registration: 'R4711‘ }, […] }); protected readonly flightForm = form(this.flight); // ^^^ FieldTree<Flight>
8. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 9 FieldTree const valid = this.flightForm.from().valid(); const errors = this.flightForm.from().errors(); const value = this.flightForm.from().value();
9. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 10 FieldTree const valid = this.flightForm.from().valid(); const errors = this.flightForm.from().errors(); const value = this.flightForm.from().value(); const regValid = this.flightForm.aircraft.registration().valid(); const regErrors = this.flightForm.aircraft.registration().errors(); const regValue = this.flightForm.aircraft.registration().value();
10. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 11 FormField <form [formRoot]="flightForm"> <input [formField]="flightForm.id" type="number" /> <input [formField]="flightForm.from" /> <input [formField]="flightForm.to" /> </form>
11. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 12 Schema protected readonly flightForm = form(this.flight);
12. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 13 Schema protected readonly flightForm = form(this.flight, (path) => { required(path.from); minLength(path.from, 3); });
13. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 14 Splitting Large Forms
14. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 15
15. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 16 DEMO
16. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 17 Conditional Validation
17. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 18 Validation for Delayed Flights
18. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 19 DEMO
19. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 20 Metadata
20. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 21 Tell the User Upfront!
21. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 22 DEMO
22. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 23 Null & Undefined
23. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 24 Undefined: Does not Exist! export interface Flight { id: number; from: string; to: string; […] delay?: number; }
24. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 25 Domain Model vs. Form Model export interface FlightFormModel { id: number; from: string; to: string; […] // Not optional delay: number } export interface FlightDomainModel { id: number; from: string; to: string; […] // Optional delay?: number }
25. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 26 Custom Controls
26. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 27 DelayStepper
27. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 28 DEMO
28. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 29 Interop
29. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 30 Stepwise Migrations Reactive Form Signal Form
30. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 31 DEMO
31. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 32 Architecture, Concepts, Implementation Modern Angular 440 pages, PDF, EPUB Regular Free Updates! angular-book.com
32. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten • Splitting Large Forms • Conditional Validation • Metadata • Null and Undefined • Custom Controls • Interop with Reactive Forms 33 Conclusion
33. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 34 [Social Media] Manfred Steyer [web] ANGULARarchitects.io Manfred Steyer @ Manfred Steyer Slides & Examples Remote Company Workshops and Consulting http://angulararchitects.io