Leonardo Pérez M

Front End Developer

@YuxiGlobal

Passionate about

```
CSS
```
```
Technology
```
```
Sports
```

@leono286

Leonardo Pérez M

Front End Developer

@YuxiGlobal

Passionate about

```
CSS
```
```
Technology
```
```
Sports
```

@leono286

Custom validators in Angular forms

Two flavors

Template driven forms

Reactive forms

Template driven forms

App Module

@NgModule {

imports: [

FormsModule,

]
}

import { FormsModule } from '@angular/forms';

Template driven forms

<input>

Class

property

[(ngModel)]

Template driven forms

😊

Template driven forms

😎

Reactive forms

App Module

@NgModule {

imports: [

ReactiveFormsModule,

]
}

import { ReactiveFormsModule} from '@angular/forms';

Reactive forms

<input>

Class

property

[formControl]

<form>

Class

property

[formGroup]

Reactive forms

😊

formBuilder.control(...)

Reactive forms

😎

Reactive forms

😎

Reactive forms

😊

It's

!!!

Custom Validators

🕵️‍♀️🕵️‍♂️

Validator

Function

Sync

{

Async

What is a validator?

Custom Validators

ValidatorFn =

(FormControl | FormGroup):

   null | ValidationErrors

Custom Validators

Sync

AsyncValidatorFn =

(FormControl | FormGroup):

 Promise<null | ValidationErrors>
 Observable<null | ValidationErrors>

Custom Validators

Async

ValidationErrors=

    [key: string]: any;

Custom Validators

{'nameTooUgly': true}

Sync

Custom Validator

🐱‍👤⚡

Create ValidatorFn
Wrap ValidatorFn in directive (template driven)
Implement validator in form

Sync Custom Validator

Create ValidatorFn

We import what we need

Sync Custom Validator

Name our ValidatorFn

Sync Custom Validator

Verify FormControl (input) has a value to validate and get value

Sync Custom Validator

Perform the validation itself and return outcome...

Sync Custom Validator

🕵️‍♀️🕵️‍♂️

Sync Custom Validator

...

🕵️‍♂️

Sync Custom Validator

Wrap ValidatorFn with directive (template driven)

We import what we need

Sync Custom Validator

Set up metadata and register our directive among validators

Sync Custom Validator

🕵️‍♂️

Set the directive's validate method to be the ValidatorFn

Sync Custom Validator

Implement our custom validator in form

Template

driven

Reactive

Directive

FormBuilder

Sync Custom Validator

What we had before

Template driven form

😎

Sync Custom Validator

🐱‍👤

Whit custom validator

Template driven form

Sync Custom Validator

Reactive form

What we had before

😎

Sync Custom Validator

Reactive form

With custom validator

🐱‍👤

Cross field

validation

🐱‍👤🐱‍👤

Cross field validation

email - confirm email
Range (min < max)
username - password
...

Cross field validation

Declare property for FormGroup (form itself)

Cross field validation

FormGroup Setup

🕵️‍♂️

Cross field validation

ControlsConfig

🕵️‍♂️

Cross field validation

ControlsConfig

Cross field validation

OptionsConfig

🕵️‍♂️

Cross field validation

Form Setup

🐱‍👤

Cross field validation

ValidatorFn

Cross field validation

ValidatorFn

Cross field validation

Template Driven Approach and all examples

https://goo.gl/h2P6Fa

Custom Validators

Validator

Function

Sync

{

Async

To be continued...

Thanks!!

Angular rocks!!