Beyond the Basics: Signal Forms

Transcript

1. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Beyond the Basics: Signal Forms ANGULARarchitects.io
2. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 2
3. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten • Signal Forms 101 (short) • Splitting Large Forms • Conditional Validation • Metadata • Null and Undefined • Custom Controls • Interop with Reactive Forms 3 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 Model
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' }, […] });
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);
9. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 9 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>
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();
11. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 11 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();
12. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 12 FormField <input [formField]="flightForm.id" type="number" /> <input [formField]="flightForm.from" /> <input [formField]="flightForm.to" />
13. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 13 Schema protected readonly flightForm = form(this.flight);
14. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 14 Schema protected readonly flightForm = form(this.flight, (path) => { required(path.from); minLength(path.from, 3); });
15. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 15 FormField <input [formField]="flightForm.id" type="number" /> <input [formField]="flightForm.from" /> <div>{{flightForm.from().errors() | json }}</div> <input [formField]="flightForm.to" />
16. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 16 Splitting Large Forms
17. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 17
18. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 18 DEMO
19. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 19 Conditional Validation
20. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 20 Validation for Delayed Flights
21. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 21 DEMO
22. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 22 Metadata
23. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 23 Tell the User Upfront!
24. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 24 DEMO
25. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 25 Null & Undefined
26. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 26 Undefined: Does not Exist! export interface Flight { id: number; from: string; to: string; […] delay?: number; }
27. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 27 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 }
28. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 28 Custom Controls
29. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 29 DelayStepper
30. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 30 DEMO
31. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 31 Interop
32. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 32 Stepwise Migrations Signal Form Reactive Form
33. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 33 DEMO
34. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 34 Let‘s Meet at ngRome, June 2026 Get your Tickets now! Early Bird Ends soon!
35. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten • Splitting Large Forms • Conditional Validation • Metadata • Null and Undefined • Custom Controls • Interop with Reactive Forms 35 Conclusion
36. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 36 [Social Media] Manfred Steyer [web] ANGULARarchitects.io Manfred Steyer @ Manfred Steyer Remote Company Workshops and Consulting http://angulararchitects.io Slides & Examples