•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Beyond the Basics: Signal Forms ANGULARarchitects.io 

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 2 

•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 

•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 

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 5 Signal Forms 101 

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 6 Model 

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 7 Setting up a Signal Form protected readonly flight = signal({ id: 123, from: 'Graz', to: 'Rome', aircraft: { type: 'T0815', registration: 'R4711' }, […] }); 

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 8 Setting up a Signal Form protected readonly flight = signal({ id: 123, from: 'Graz', to: 'Rome', aircraft: { type: 'T0815‘, registration: 'R4711‘ }, […] }); protected readonly flightForm = form(this.flight); 

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 9 Setting up a Signal Form protected readonly flight = signal({ id: 123, from: 'Graz', to: 'Rome', aircraft: { type: 'T0815‘, registration: 'R4711‘ }, […] }); protected readonly flightForm = form(this.flight); // ^^^ FieldTree 

•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(); 

•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(); 

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 12 FormField 

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 13 Schema protected readonly flightForm = form(this.flight); 

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 14 Schema protected readonly flightForm = form(this.flight, (path) => { required(path.from); minLength(path.from, 3); }); 

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 15 FormField 

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 16 Splitting Large Forms 

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 17 

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 18 DEMO 

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 19 Conditional Validation 

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 20 Validation for Delayed Flights 

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 21 DEMO 

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 22 Metadata 

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 23 Tell the User Upfront! 

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 24 DEMO 

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 25 Null & Undefined 

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 26 Undefined: Does not Exist! export interface Flight { id: number; from: string; to: string; […] delay?: number; } 

•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 } 

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 28 Custom Controls 

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 29 DelayStepper 

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 30 DEMO 

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 31 Interop 

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 32 Stepwise Migrations Signal Form Reactive Form 

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 33 DEMO 

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 34 Let‘s Meet at ngRome, June 2026 Get your Tickets now! Early Bird Ends soon! 

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten • Splitting Large Forms • Conditional Validation • Metadata • Null and Undefined • Custom Controls • Interop with Reactive Forms 35 Conclusion 

•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