Angular generic forms - Speaker Deck

Slide 1

Slide 1 text

Generic Forms @eliraneliassy ng-japan 2019

Slide 2

Slide 2 text

About mySelf • Experienced FE developer, specialised in B2C applications • Founder & developer @ e-square.io • Angular-IL & AngularUP conf CO-organiser • Writer for AngularInDepth

Slide 3

Slide 3 text

Building powerful Angular community

Slide 4

Slide 4 text

Reusable Form Controls

Slide 5

Slide 5 text

Where it all begins…

Slide 6

Slide 6 text

Where it all begins…

Slide 7

Slide 7 text

Email input X12

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Demo 1 Creating reusable form control

Slide 10

Slide 10 text

Objective 1 reusable form control Requirements: • Should support type text and password • Should support validations for required and pattern • Should show UI indications • Show show error messages

Slide 11

Slide 11 text

export class FirstCustomInputComponent { @Input() type = 'text'; @Input() isRequired: boolean = false; @Input() pattern: string = null; @Input() label: string = null; @Input() placeholder: string; @Input() errorMsg: string; } Reusable Custom Input

Slide 12

Slide 12 text

{{label}} * {{errorMsg}}

Reusable Custom Input

Slide 13

Slide 13 text

{{label}} * {{errorMsg}}

Reusable Custom Input

Slide 14

Slide 14 text

{{label}} * {{errorMsg}}

Reusable Custom Input

Slide 15

Slide 15 text

{{label}} * {{errorMsg}}

Reusable Custom Input

Slide 16

Slide 16 text

Using the custom form control Sign in

Slide 17

Slide 17 text

Using the custom form control Sign in

Slide 18

Slide 18 text

No value accessor for form control

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

The ControlValueAccesor interface A bridge between our custom input to the Angular forms API

Slide 21

Slide 21 text

Using the custom form control export interface ControlValueAccessor { writeValue(obj: any): void; registerOnChange(fn: any): void; registerOnTouched(fn: any): void; setDisabledState?(isDisabled: boolean): void; }

Slide 22

Slide 22 text

Demo 2 Creating reusable form control using the ControlValueAccessor interface

Slide 23

Slide 23 text

And…THAT’ IT!

Slide 24

Slide 24 text

Reusable Form

Slide 25

Slide 25 text

Now we got this…

Slide 26

Slide 26 text

Objective 2- reusable form Requirements: • Create an Address form which can be reused. • Implement the form - UI, controls, Validations - just once.

Slide 27

Slide 27 text

Demo 3 Reusable form with the ControlValueAccessor

Slide 28

Slide 28 text

Sub forms

Slide 29

Slide 29 text

Demo 4 Sub forms

Slide 30

Slide 30 text

• The ControlValueAccessor as a bridge between Angular forms API to our custom controls and reusable forms. • How the DI can help us to inject the NgControl in order to get the control reference. • How we can leverage the DI to create sub forms. Summary

Slide 31

Slide 31 text

http://bit.ly/reusable-angular-forms @eliraneliassy

Slide 32

Slide 32 text

Thank You @eliraneliassy eliran.eliassy@gmail.com eliraneliassy https://eliassy.dev