Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

Schedule • Custom reactive validations • Multi-providers • Custom template validations • Custom from controls

Slide 3

Slide 3 text

Model-driven validations https://github.com/angular/angular/blob/master/modules/ %40angular/forms/src/validators.ts

Slide 4

Slide 4 text

Custom model-driven validations https://embed.plnkr.co/VJm56Q4hpIIAgkvmzGin/ PostcodeValidation @

Slide 5

Slide 5 text

Custom async model-driven validations https://embed.plnkr.co/VJm56Q4hpIIAgkvmzGin/ AsyncPostcodeValidation @

Slide 6

Slide 6 text

ForwardRef • We use it because es6 classes aren't hoisted • forwardRef takes a function as an argument that returns a class. The argument function is called after the class is declared.

Slide 7

Slide 7 text

DI Injectors Module Component Component Directive Directive • Every Component has an Injector • Every Directive takes her parent Component's Injector

Slide 8

Slide 8 text

Multi Providers

Slide 9

Slide 9 text

Multi Providers Example (1) Creating a token

Slide 10

Slide 10 text

Multi Providers Example (2) Creating a directive 1

Slide 11

Slide 11 text

Multi Providers Example (3) Creating a directive 2

Slide 12

Slide 12 text

Multi Providers Example (4) Creating a collector

Slide 13

Slide 13 text

Multi Providers Example (5) Using all directives

Slide 14

Slide 14 text

Multi Providers Example (6) Example Result

Slide 15

Slide 15 text

Custom template-driven validations https://embed.plnkr.co/VJm56Q4hpIIAgkvmzGin/ emailValidatorProvider @

Slide 16

Slide 16 text

Custom async template-driven validations https://embed.plnkr.co/VJm56Q4hpIIAgkvmzGin/ asyncEmailValidatorProvider @

Slide 17

Slide 17 text

Custom Form Controls https://angular.io/docs/ts/latest/api/forms/index/ControlValueAccessor- interface.html

Slide 18

Slide 18 text

Custom Form Controls

Slide 19

Slide 19 text

Custom async template-driven validations https://embed.plnkr.co/VJm56Q4hpIIAgkvmzGin/ CounterComponent @

Slide 20

Slide 20 text

Questions?