Share
Embed

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 2

Slide 3

Slide 3 text

•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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

•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‘ }, […] }); protected readonly flightForm = form(this.flight);

Slide 7

Slide 7 text

•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); // ^^^ FieldTree

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 11 FormField

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 15

Slide 15

Slide 15 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 16 DEMO

Slide 16

Slide 16 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 17 Conditional Validation

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 19 DEMO

Slide 19

Slide 19 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 20 Metadata

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 22 DEMO

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 26 Custom Controls

Slide 26

Slide 26 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 27 DelayStepper

Slide 27

Slide 27 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 28 DEMO

Slide 28

Slide 28 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 29 Interop

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 31 DEMO

Slide 31

Slide 31 text

•Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 32 Architecture, Concepts, Implementation Modern Angular 440 pages, PDF, EPUB Regular Free Updates! angular-book.com

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

•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