Signal Forms: Details & Live Coding @enterJS 2026 in Mannheim

Transcript

1. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Signal Forms: Details & Live Coding ANGULARarchitects.io
2. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 2
3. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 3 1) Signal Forms 101 2) Splitting Large Forms 3) Conditional Validation 4) Using Metadata 5) Null & Undefined 6) Custom Controls 7) Interop with Reactive Forms Agenda
4. •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
5. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 5 Signal Forms 101
6. •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' }, […] });
7. •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);
8. •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>
9. •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();
10. •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();
11. •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>
12. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 12 Schema protected readonly flightForm = form(this.flight);
13. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 13 Schema protected readonly flightForm = form(this.flight, (path) => { required(path.from); minLength(path.from, 3); });
14. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 14 DEMO
15. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 15 Splitting Large Forms
16. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 16
17. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 17 DEMO
18. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 18 Conditional Validation
19. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 19 Validation for Delayed Flights
20. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 20 DEMO
21. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 21 Metadata
22. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 22 Tell the User Upfront!
23. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 23 DEMO
24. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 24 Null & Undefined
25. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 25 Undefined: Does not Exist! export interface Flight { id: number; from: string; to: string; […] delay?: number; }
26. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 26 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 }
27. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 27 Custom Controls
28. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 28 DelayStepper
29. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 29 DEMO
30. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 30 Interop
31. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 31 Stepwise Migrations Reactive Form Signal Form
32. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 32 DEMO
33. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 33 Architecture, Concepts, Implementation Modern Angular 440 pages, PDF, EPUB Regular Free Updates! angular-book.com
34. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten • Splitting Large Forms • Conditional Validation • Metadata • Null and Undefined • Custom Controls • Interop with Reactive Forms 34 Conclusion
35. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 35 [Social Media] Manfred Steyer [web] ANGULARarchitects.io Manfred Steyer @ Manfred Steyer Slides & Examples Remote Company Workshops and Consulting http://angulararchitects.io